TextInput

Single line text input.

Properties

border?: boolean

fontSize?: number | number[]

icon?: React.ComponentType | React.ReactNode

iconRight?: React.ComponentType | React.ReactNode

padding?: number | number[]

paddingX?: number | number[]

paddingY?: number | number[]

paddingTop?: number | number[]

paddingRight?: number | number[]

paddingBottom?: number | number[]

paddingLeft?: number | number[]

prefix?: React.ReactNode

radius?: number | number[]

space?: number | number[]

suffix?: React.ReactNode

weight?: string

Accessibility considerations

When using TextInput, assistive technologies like screenreaders and voice input will expect that they have an accessible name. For input fields, this is sometimes also referred to as a label.

The preferred way to add an accessible name is to add a visible label, so that all users can benefit from it. To add a visible label, add an id to TextInput, and then a <label> element with a for attribute that corresponds with the input's id:

<Card padding={4}>
  <label htmlFor="street-address">Street Address</label>
  <TextInput
    value={value}
    id="street-address"
  />
</Card>

Alternatively, a hidden label can be added directly onto the input with aria-label:

<Card padding={4}>
  <TextInput
    value={value}
    aria-label="Street Address"
  />
</Card>

For more information, see:

Updated Sep 14, 2022 @ 02:23

On this page

Properties

Accessibility considerations