TextInput

The most basic and common type of input field. Text input fields are primarily used to enter and edit text in forms.

Props

className

String

disabled

Bool

false

error

Bool

forwardedRef

Custom

name

String

required

onChange

Func

required

size

'small' │ 'medium' │ 'large'

'large'

value

String

Examples

Default Usage

<State initial={{ value: '' }}>
  {({ state, setState }) => (
    <TextInput
      name="text-input"
      onChange={(name, value) => setState({ value })}
      placeholder="Enter a description"
      value={state.value}
    />
  )}
</State><State initial={{ value: '' }}>
  {({ state, setState }) => (
    <TextInput
      name="text-input"
      onChange={(name, value) => setState({ value })}
      placeholder="Enter a description"
      value={state.value}
    />
  )}
</State>

Error Modifier

<TextInput
  error
  name="text-input"
  onChange={() => {}}
  placeholder="Enter a description"
  value="This input has an error"
/><TextInput
  error
  name="text-input"
  onChange={() => {}}
  placeholder="Enter a description"
  value="This input has an error"
/>

Disabled Modifier

<TextInput
  disabled
  name="text-input"
  onChange={() => {}}
  placeholder="Enter a description"
  value="This input cannot be modified"
/><TextInput
  disabled
  name="text-input"
  onChange={() => {}}
  placeholder="Enter a description"
  value="This input cannot be modified"
/>

Size Modifier

<div className="docs-vertical-group">
  <TextInput
    name="text-input"
    onChange={() => {}}
    placeholder="Small"
    size="small"
  />
  <TextInput name="text-input" onChange={() => {}} placeholder="Medium" />
  <TextInput
    name="text-input"
    onChange={() => {}}
    placeholder="Large"
    size="large"
  />
</div><div className="docs-vertical-group">
  <TextInput
    name="text-input"
    onChange={() => {}}
    placeholder="Small"
    size="small"
  />
  <TextInput name="text-input" onChange={() => {}} placeholder="Medium" />
  <TextInput
    name="text-input"
    onChange={() => {}}
    placeholder="Large"
    size="large"
  />
</div>

TextInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Default Usage

Error Modifier

Disabled Modifier

Size Modifier

Props