TextInput

TextInput component is a component that is used to get user input in a text field. It is usually used together with a FormControl to provide an accessible label, validation messages, etc.

Import

import { TextInput } from '@sajari-ui/core';

import { TextInput } from '@sajari-ui/core';

Usage

Here's a basic usage of the TextInput component.

Editable Example

<TextInput placeholder="Basic usage" />

<TextInput placeholder="Basic usage" />

Controlled Input

Editable Example

function Example() {
  const [value, setValue] = React.useState('');
  const handleChange = (event) => setValue(event.target.value);

  return (
    <>
      <TextInput value={value} onChange={handleChange} placeholder="Here is a sample placeholder" size="sm" />
    </>
  );
}

function Example() {
  const [value, setValue] = React.useState('');
  const handleChange = (event) => setValue(event.target.value);
  return (
    <>
      <TextInput value={value} onChange={handleChange} placeholder="Here is a sample placeholder" size="sm" />
    </>
  );
}

Invalid

Editable Example

<TextInput placeholder="Invalid example" invalid />

<TextInput placeholder="Invalid example" invalid />

Disabled

Editable Example

<Flex flexDirection="flex-col" space="space-y-2">
  <TextInput placeholder="Disabled example" disabled />
  <TextInput placeholder="Disabled example" disabled value="Shoes" />
</Flex>

<Flex flexDirection="flex-col" space="space-y-2">
  <TextInput placeholder="Disabled example" disabled />
  <TextInput placeholder="Disabled example" disabled value="Shoes" />
</Flex>

ReadOnly

Editable Example

<TextInput placeholder="ReadOnly example" readOnly />

<TextInput placeholder="ReadOnly example" readOnly />

Props

The Input component composes PseudoBox so you can pass all PseudoBox props, and React.InputHTMLAttributes.

Name	Type	Default	Description
`aria-label`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`aria-describedby`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`disabled`	`boolean`	`false`	If `true`, the input will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.
`invalid`	`boolean`	`false`	If `true`, the `input` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.
`required`	`boolean`	`false`	If `true`, the input element will be required.
`readOnly`	`boolean`	`false`	If `true`, prevents the value of the input from being edited.