TextInput

Customise the size of the TextInput via the size prop on field.

{/* standard */}
<Field label="Standard input" size="standard">
   <TextInput placeholder="Placeholder" />
</Field>

{/* large */}
<Field label="Large input" size="large">
   <TextInput placeholder="Placeholder" />
</Field>

To control a TextInput provide a value, as well as an onChange function to set the new value whenever it is updated.

const [value, setValue] = React.useState(defaultValue);
const handleChange = (event) => setValue(event.target.value)

return (
  <Stack gap="8">
    <Field label="Controlled example">
      <TextInput value={value} onChange={handleChange} />
    </Field>
    <Text>The current value is: {value}</Text>
  </Stack>
);

When using formData from a request object to populate form data, you can use an uncontrolled TextInput component. In this case, you don't need to provide any state or update functions.

If you're using a form library like react-hook-form that uses an imperative API to retrieve the value of a form control, we forward the ref to the underlying <input> element. Here's an example:

const ref = useRef(null);

return (
  <Stack gap="8">
    <Field label="Uncontrolled example">
      <TextInput ref={ref} placeholder="Placeholder" />
    </Field>
  </Stack>
);

TextInput accepts adornmentStart and adornmentEnd props. These are slots to render elements that appear to be inside of the input.

Adornments should be interactive, like buttons, or non-interactive, serving as supplementary information such as prefixes or suffixes that denote the input's expected unit.

For non-interactive supplementary information, consider using ClickableAdornment for enhanced accessibility and user experience.

Below is an example of how you might construct a password input field using the adornmentEnd slot to include a button that toggles the visibility of the password:

const [type, setType] = React.useState("password");

const isPassword = type === "password";

function toggleType() {
  setType((prevType) =>
    prevType === "password" ? "text" : "password"
  );
}

return (
  <Field label="Password" size="large">
    <TextInput
      adornmentEnd={
        <IconButton
          aria-label={isPassword ? 'Show password' : 'Hide password'}
          icon={isPassword ? LockClosedIcon : LockOpenIcon}
          onClick={toggleType}
          variant="neutralTertiary"
          size="small"
        />
      }
      defaultValue="S3cr3t P@55w0rd"
      styles={{ adornmentEnd: { paddingInlineEnd: "0.5rem" } }}
      type={type}
    />
  </Field>
);

Use the counter prop on Field to display a character count indicator. The counter accepts value, maxValue, and isAlwaysVisible parameters.

The counter shows the difference between the current value and maxValue, along with a circular progress indicator. When the value exceeds maxValue, it displays a negative number.

By default, the counter appears when input reaches 50% of maxValue. Use isAlwaysVisible: true to show it at all times.

const [inputValue, setInputValue] = React.useState('');
const maxLength = 20;

return (
  <Field
    className="w-[300px]"
    label="Characters counter demo"
    counter={{
      value: inputValue.length,
      maxValue: maxLength,
      isAlwaysVisible: true
    }}
    errorMessage={inputValue.length > maxLength ? 'Max length exceeded' : undefined}
  >
    <TextInput
      placeholder="Enter text"
      defaultValue={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  </Field>
)

Use the isDisabled prop for <Field/> to show that a TextInput isn't usable.

<Field label="disabled input" isDisabled>
   <TextInput placeholder="Placeholder" />
</Field>

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

const [type, setType] = React.useState('password');

const isPassword = type === 'password';

function toggleType() {
	setType((prevType) => (prevType === 'password' ? 'text' : 'password'));
}

return (
	<>
		<Field label="Facebook page" secondaryLabel="(without URL)">
			<TextInput
				adornmentStart={
					<ClickableAdornment
						className={`-me-1.5 ps-2 text-positive font-stronger`}
					>
						https://facebook.com/
					</ClickableAdornment>
				}
				className="text-inverse-caution"
				classNames={{
					focusIndicator: 'border-2 border-input-critical',
				}}
				defaultValue="AnywhereWorks"
			/>
		</Field>
		<Field isDisabled label="Password" size="large">
			<TextInput
				adornmentEnd={
					<IconButton
						aria-label={isPassword ? 'Show password' : 'Hide password'}
						icon={isPassword ? LockClosedIcon : LockOpenIcon}
						onClick={toggleType}
						size="small"
						variant="neutralPrimary"
					/>
				}
				classNames={{
					focusIndicator: 'border-2 border-primary',
					adornmentEnd: 'bg-positive border-2 border-input-active p-2',
				}}
				defaultValue="S3cr3t P@55w0rd"
				type={type}
			/>
		</Field>
	</>
);