Sanity UI
Docs
Arcade
  1. Docs
  2. Primitives
  3. 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>
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:
Made withby folks at