Skip to main content

​
Overview

The Input component is a foundational text input element that provides the core functionality for text entry. It can be used standalone or as a building block for higher-level components like TextField.
For most use cases, consider using TextField which includes label and helper text.

​
Import

import { Input } from '@naturacosmeticos/natds-react'

​
Basic Usage

import React, { useState } from 'react'
import { Input } from '@naturacosmeticos/natds-react'

function App() {
  const [value, setValue] = useState('')

  return (
    <Input
      id="basic-input"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter text..."
    />
  )
}

​
Input Types

// Text Input
<Input
  id="text-input"
  type="text"
  value={text}
  onChange={(e) => setText(e.target.value)}
/>

// Password Input
<Input
  id="password-input"
  type="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

// Multiline (Textarea)
<Input
  id="textarea-input"
  type="multiline"
  minRows={4}
  value={description}
  onChange={(e) => setDescription(e.target.value)}
/>

​
Sizes

<Input
  id="medium-input"
  size="medium"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

<Input
  id="mediumx-input"
  size="mediumX"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

​
Feedback States

// Error State
<Input
  id="error-input"
  feedback="error"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

// Success State
<Input
  id="success-input"
  feedback="success"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

​
States

​
Disabled

<Input
  id="disabled-input"
  disabled
  value="Cannot edit"
  onChange={() => {}}
/>

​
Read Only

<Input
  id="readonly-input"
  readOnly
  value="Read only value"
  onChange={() => {}}
/>

​
With Icons

​
Leading Icon

import { Icon } from '@naturacosmeticos/natds-react'

<Input
  id="search-input"
  iconLeading={<Icon name="outlined-action-search" color="highEmphasis" />}
  placeholder="Search..."
  value={search}
  onChange={(e) => setSearch(e.target.value)}
/>

​
Action Icon

<Input
  id="password-input"
  type="password"
  action="icon"
  IconComponent={<Icon name="outlined-action-visibility" color="highEmphasis" />}
  ariaLabel="Toggle password visibility"
  onClick={() => setShowPassword(!showPassword)}
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

​
Action Image

<Input
  id="profile-input"
  action="image"
  src="/user-avatar.png"
  alt="User profile picture"
  value={username}
  onChange={(e) => setUsername(e.target.value)}
/>

​
Multiline Options

// Basic Multiline
<Input
  id="multiline"
  type="multiline"
  minRows={3}
  value={text}
  onChange={(e) => setText(e.target.value)}
/>

// Resizable Multiline
<Input
  id="resizable-multiline"
  type="multiline"
  minRows={5}
  isResizable
  value={text}
  onChange={(e) => setText(e.target.value)}
/>

​
Props

​
id
string
required
The id of the input element
​
value
string
The current value of the input
​
onChange
React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
Callback fired when the value changes
​
type
'text' | 'password' | 'multiline'
default:"text"
The type of input to render
​
size
'medium' | 'mediumX'
default:"mediumX"
The height of the input field
​
placeholder
string
Placeholder text shown when input is empty
​
disabled
boolean
default:"false"
If true, the input is disabled
​
readOnly
boolean
default:"false"
If true, the input is read-only
​
feedback
'success' | 'error'
Visual feedback state
​
minRows
number
default:"3"
Minimum number of rows for multiline type
​
isResizable
boolean
default:"false"
If true, allows manual resizing of multiline input
​
iconLeading
React.ReactElement
Icon component displayed at the start of the input
​
action
'icon' | 'image'
Type of action element to display
​
IconComponent
React.ReactElement
Icon component for action button. Required when action="icon"
​
ariaLabel
string
Accessibility label for action icon. Required when action="icon"
​
onClick
() => void
Click handler for action icon. Required when action="icon"
​
src
string
Image source URL. Required when action="image"
​
alt
string
Alternative text for image. Required when action="image"
​
label
string
Label text (used internally by TextField)
​
helperText
string
Helper text (used internally by TextField)
​
required
boolean
default:"false"
If true, marks the field as required
​
brand
BrandTypes
Brand theme to apply
​
className
string
Optional CSS class name
​
onBlur
React.FocusEventHandler
Callback fired when input loses focus
​
onFocus
React.FocusEventHandler
Callback fired when input gains focus
​
onKeyDown
React.KeyboardEventHandler
Callback fired when a key is pressed down
​
onKeyUp
React.KeyboardEventHandler
Callback fired when a key is released
​
accessibility
InputAccessibilityProps
Accessibility attributes object:
  • aria-label: Label for screen readers
  • aria-labelledby: ID of labeling element
  • aria-describedby: ID of description element
  • aria-required: Required state
  • aria-invalid: Invalid state
  • aria-disabled: Disabled state
  • aria-autocomplete: Autocomplete behavior
  • aria-activedescendant: Active descendant ID
  • tabIndex: Tab order

​
Event Handlers

const [value, setValue] = useState('')

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value)
}

const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
  console.log('Input focused')
}

const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
  console.log('Input blurred')
}

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'Enter') {
    console.log('Enter pressed')
  }
}

<Input
  id="event-input"
  value={value}
  onChange={handleChange}
  onFocus={handleFocus}
  onBlur={handleBlur}
  onKeyDown={handleKeyDown}
/>

​
Accessibility

<Input
  id="accessible-input"
  accessibility={{
    'aria-label': 'Search query',
    'aria-describedby': 'search-hint',
    'aria-required': true,
    'aria-invalid': hasError,
    tabIndex: 0
  }}
  value={query}
  onChange={(e) => setQuery(e.target.value)}
/>

​
Best Practices

  • Always provide an id attribute
  • Use appropriate ARIA attributes for accessibility
  • Provide clear placeholders
  • Use type="password" for sensitive data
  • Handle focus and blur events for validation
  • Ensure keyboard navigation works properly

​
Helper Components

The Input component is often used with helper components: 
import { Input, InputHelperText, Label } from '@naturacosmeticos/natds-react'

function CustomField() {
  const [value, setValue] = useState('')
  const [error, setError] = useState('')

  return (
    <div>
      <Label htmlFor="custom-input" label="Username" required />
      <Input
        id="custom-input"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        feedback={error ? 'error' : undefined}
      />
      <InputHelperText
        helperText={error || 'Choose a unique username'}
        feedback={error ? 'error' : undefined}
      />
    </div>
  )
}

​
TypeScript

import { InputProps, InputType, InputSize, Feedback } from '@naturacosmeticos/natds-react'

interface CustomInputProps {
  inputId: string
  inputValue: string
  onInputChange: (value: string) => void
  inputType?: InputType
}

const CustomInput: React.FC<CustomInputProps> = ({
  inputId,
  inputValue,
  onInputChange,
  inputType = 'text'
}) => {
  return (
    <Input
      id={inputId}
      type={inputType}
      value={inputValue}
      onChange={(e) => onInputChange(e.target.value)}
    />
  )
}

​
Related Components

Build docs developers (and LLMs) love

Get started for freeTalk to us