Docs
Primitives
TextInput

`<TextInput />`

Single line text input.

Properties

border?: boolean

clearButton?: boolean

customValidity?: string

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?: 'regular' | 'medium' | 'semibold' | 'bold'

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><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><Card padding={4}>
  <TextInput
    value={value}
    aria-label="Street Address"
  />
</Card>

For more information, see:

Made withby folks at