Input

An interactive control which enables the user to type in data.

MDN input, UI Playbook

text-secondary-900 bg-secondary-100 border border-secondary-200 placeholder-secondary-400 rounded transition-all focus:outline-none ring-offset-2 ring-primary-700 focus:ring-2 dark:bg-secondary-800 dark:text-white dark:border-secondary-700 dark:ring-secondary-800 dark:placeholder-secondary-600 text-base px-3 py-1.5 cursor-text

import React from 'react'
import { Input } from '@components/ui/input';

() => {
	const [value, setValue] = React.useState('johndoe');

  return (
    <Input
      value={value} 
      onChange={(evt) => setValue(evt.target.value)}
      placeholder="Username e.g. johndoe"
    />
  );
};

The Input UI component uses the input HTML element underneath so you can pass input attributes to it. However, there are some differences with the attributes of the Input UI component:

• HTML input's size has been renamed to width to avoid conflict with the size prop of the Input UI component.

Installation

Copy and paste this Input primitive at components/ui/Input.tsx.

Usage

import { Input } from '@components/ui/Input';

<Input
  type="text"
  name="username"
  placeholder="e.g. johndoe"
/>

Examples

Sizes

There are four sizes an input can have. You can adjust the variant using the size prop. By default, it uses base.

Outlined

You can use the outlined prop to make the input outlined.

You can toggle the outline version of a input by <Input outlined />. It is false by default.

Input Validation

Before and/or after the user submits their input, we validate what they've entered. We can use the success, warn, and error props to notify the users of the validation result.

Success

You can use the success prop to notify the users of a successful validation result.

Warning

You can use the warn prop to notify the users of a warning. It is recommended to avoid relying solely on color by adding an icon or a text to explain the warning.

Error

You can use the error prop to notify the users of that the validation failed. It is recommended to avoid relying solely on color by adding an icon or a text to explain the error.

Disabled State

Toggling the disabled prop to true will prevent any interactions to the input.

Loading State

For the loading state, you can use a loading icon and add a disabled prop to prevent any interactions to the input.

Selected

Toggle the selected prop will trigger the selected state.