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

Made withby folks at