Input

Usage

Import the component and render it.

import { Input } from 'src/components/Input/Input';
import { LifebuoyIcon } from '@phosphor-icons/react';

<Input
  size="sm"
  label="Label"
  placeholder="Placeholder text"
  helperText="Helper text"
  iconStart={<LifebuoyIcon />}
  iconEnd={<LifebuoyIcon />}
/>

Accessibility

Role: textbox (native <input>).

• The Label is a <label for> the field: clicking it focuses the field. Without a label, pass aria-label.
• The helper text is linked with aria-describedby; with error it is the error message and the field gets aria-invalid="true".
• Icons are decorative (aria-hidden). For an action such as clearing the value, put a button with an aria-label in iconEnd.
• Text inputs show :focus-visible on click as well as on Tab, so Focus appears whenever the field is being typed in.

Size

Set the size prop: Small is "sm", Medium is "md".

<Input size="sm" />
<Input size="md" />

States

Disabled comes from the disabled prop; Error from the error prop; Filled from the content (defaultValue). Hover and Focus follow the pointer and the keyboard: try them in the playground.

<Input disabled />
<Input error />
<Input defaultValue="Input text" />

Used in

Input is part of CommandMenu, DatePicker, Footer, Form and NavigationBar.

Actions

Pass callbacks to respond to the component.

import { Input } from 'src/components/Input/Input';
import { LifebuoyIcon } from '@phosphor-icons/react';

<Input
  size="sm"
  label="Label"
  placeholder="Placeholder text"
  helperText="Helper text"
  iconStart={<LifebuoyIcon />}
  iconEnd={<LifebuoyIcon />}
  onValueChange={(value) => console.log(value)}
/>