Skip to main content
Input is a form field component that allows users to enter text on a single line. It supports various input types including text, email, password, number, date, time, and more.

​
Installation

yarn add @twilio-paste/input @twilio-paste/label @twilio-paste/help-text

​
Usage

import { Input } from '@twilio-paste/input';
import { Label } from '@twilio-paste/label';
import { HelpText } from '@twilio-paste/help-text';

const MyComponent = () => {
  const [value, setValue] = React.useState('');
  
  return (
    <>
      <Label htmlFor="email">Email address</Label>
      <Input
        id="email"
        type="email"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="[email protected]"
      />
      <HelpText>Enter your email address</HelpText>
    </>
  );
};

​
Props

​
type
string
required
Sets the input type. Supports all HTML5 input types including text, email, password, number, tel, url, search, date, time, etc.
​
id
string
Sets the id of the input. Should match the htmlFor of the Label component.
​
name
string
Sets the name attribute of the input for form submission.
​
value
string
The controlled value of the input.
​
defaultValue
string
The default value for uncontrolled inputs.
​
placeholder
string
Placeholder text displayed when the input is empty.
​
disabled
boolean
default:"false"
Disables the input, preventing user interaction.
​
readOnly
boolean
default:"false"
Makes the input read-only. Users can see but not modify the value.
​
required
boolean
default:"false"
Marks the input as required for form validation.
​
hasError
boolean
default:"false"
Sets the input to an error state with error styling.
​
insertBefore
React.ReactNode
Used to add a prefix to the input, such as an icon or text.
​
insertAfter
React.ReactNode
Used to add a suffix to the input, such as an icon or text.
​
variant
'default' | 'inverse'
default:"'default'"
Visual style variant. Use inverse for dark backgrounds.
​
onChange
(event: React.ChangeEvent<HTMLInputElement>) => void
Callback fired when the input value changes.
​
onFocus
(event: React.FocusEvent<HTMLInputElement>) => void
Callback fired when the input receives focus.
​
onBlur
(event: React.FocusEvent<HTMLInputElement>) => void
Callback fired when the input loses focus.
​
element
string
default:"'INPUT'"
Overrides the default element name for customization.

​
Number Input Props

​
min
number
Minimum value for number inputs.
​
max
number
Maximum value for number inputs.
​
step
number
Step increment for number inputs.
​
i18nStepUpLabel
string
Accessible label for the increment button on number inputs.
​
i18nStepDownLabel
string
Accessible label for the decrement button on number inputs.

​
Examples

​
With Prefix/Suffix

import { Input } from '@twilio-paste/input';
import { SearchIcon } from '@twilio-paste/icons/esm/SearchIcon';

<Input
  type="text"
  placeholder="Search..."
  insertBefore={<SearchIcon decorative />}
/>

​
Error State

import { Input } from '@twilio-paste/input';
import { Label } from '@twilio-paste/label';
import { HelpText } from '@twilio-paste/help-text';

<>
  <Label htmlFor="invalid-email" required>
    Email
  </Label>
  <Input
    id="invalid-email"
    type="email"
    hasError
    value="invalid-email"
  />
  <HelpText variant="error">
    Please enter a valid email address.
  </HelpText>
</>

​
Number Input

import { Input } from '@twilio-paste/input';

<Input
  type="number"
  min={0}
  max={100}
  step={5}
  defaultValue={50}
/>

​
Accessibility

  • Always pair Input with a Label component using matching id and htmlFor props
  • Use required prop to mark required fields and include RequiredDot in Label
  • Provide helpful error messages with HelpText in error variant
  • Use appropriate input types for better mobile keyboard experience
  • Ensure sufficient color contrast in both default and inverse variants
  • Support keyboard navigation and screen reader announcements

​
Best Practices

  • Use specific input types (email, tel, url) to improve mobile UX with appropriate keyboards
  • Always provide clear labels and help text
  • Use placeholder text sparingly - it should not replace labels
  • Show validation errors inline with clear, actionable messages
  • Consider using insertBefore/insertAfter for common patterns like search icons or currency symbols
  • For number inputs, ensure min/max values are multiples of the step value

Build docs developers (and LLMs) love

Get started for freeTalk to us