Input

A text input component for forms and user data entry with built-in styling and accessibility features.

@react.component
let make = () =>
  <Field>

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Input
Copy

Usage

Copy<Input />

Examples

Basic

@react.component
let make = () => <Input placeholder="Enter text" />

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

@react.component
let make = () =>
  <Field>

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

@react.component
let make = () =>
  <Field.Group>

Disabled

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

@react.component
let make = () =>
  <Field dataDisabled={true}>

Invalid

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

@react.component
let make = () =>
  <Field dataInvalid={true}>

File

Use the type="file" prop to create a file input.

@react.component
let make = () =>
  <Field>

Inline

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

@react.component
let make = () =>
  <Field orientation=BaseUi.Types.Orientation.Horizontal>

Grid

Use a grid layout to place multiple inputs side by side.

@react.component
let make = () =>
  <Field.Group className="grid max-w-sm grid-cols-2">

Required

Use the required attribute to indicate required inputs.

@react.component
let make = () =>
  <Field>

Badge

Use Badge in the label to highlight a recommended field.

@react.component
let make = () =>
  <Field>

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

@react.component
let make = () =>
  <Field>

Button Group

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

@react.component
let make = () =>
  <Field>

Form

A full form example with multiple inputs, a select, and a button.

@react.component
let make = () => {
  let countries: array<BaseUi.Select.Item.t<string>> = [