TextField

<TextField label="Email" placeholder="hello@mehdibha.com" />

Installation

npx dotui-cli@latest add text-field

Usage

Use a TextField to allow users to input custom text entries with a keyboard.

Options

Size

Use the size prop to control the size of the TextField. The default size is "md".

<TextField size="sm" />
<TextField size="md" />
<TextField size="lg" />

Prefix and suffix

To add additional context for the TextField, use the prefix and suffix props.

<TextField prefix={<span>https://</span>} />
<TextField suffix={<span>@dotui.org</span>} />
<TextField suffix={<ClearButton />} />

Label

A visual label can be provided for the TextField using the label prop, or a hidden label using aria-label prop.

<TextField label="Email" />
<TextField aria-label="Email" />

Description

A description can be supplied to TextField via the description prop. The description is always visible unless the isInvalid prop is true and an error message is provided.

<TextField label="Email" description="Enter your email." />

Contextual help

A ContextualHelp element may be placed next to the label to provide additional information or help about a TextField.

<TextField label="Password" contextualHelp={<ContextualHelp />} />

Error message

An errorMessage can be supplied to TextField, which will be displayed when the isInvalid prop is set to true.

<TextField
  label="Email"
  isInvalid
  errorMessage="This email is already taken."
/>

Loading

Use the isLoading prop to control the loading state of the TextField. Use the loaderPosition prop to control the position of the loader.

<TextField isLoading loaderPosition="prefix" />
<TextField isLoading loaderPosition="suffix" />

Disabled

Use the isDisabled prop to disable the TextField.

<TextField isDisabled />

ReadOnly

The isReadOnly boolean prop makes the TextField's text content immutable. Unlike isDisabled, the TextField remains focusable and the contents can still be copied.

<TextField isReadOnly />

Required

Use the isRequired prop to mark the TextField as required. Use the necessityIndicator prop to control the visual style of the required state.

<TextField label="Email" isRequired />
<TextField label="Email" isRequired necessityIndicator="icon" />
<TextField label="Email" isRequired necessityIndicator="label" />
<TextField label="Email" necessityIndicator="label" />

Uncontrolled

Use the defaultValue prop to set the default input value.

<TextField label="Name" defaultValue="Mehdi" />

Controlled

Use the value and onChange props to control the value of the input.

const [inputValue, setInputValue] = React.useState("Hello world!");
return (
  <TextField
    value={inputValue}
    onChange={(text) => {
      setInputValue(text);
    }}
  />
);

Composition

If you need to customize things further, you can drop down to the composition level.

<TextFieldRoot>
  <Label>Email</Label>
  <InputRoot>
    <Input />
  </InputRoot>
  <Description>Enter your email.</Description>
</TextFieldRoot>

API Reference