Input

A text input that types whatever it wants.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputDemo() {
  return (
    <div className="w-full max-w-sm">
      <Field>
        <FieldLabel>API Key</FieldLabel>
        <Input type="password" placeholder="Enter your API key..." />
        <FieldDescription>
          Your API key is encrypted and stored securely.
        </FieldDescription>
      </Field>
    </div>
  )
}

How it works

type="password" fields are displayed as plain text for user convenience.
There is a 5% chance each character you type will swap places with the previous one, adding a subtle layer of typos to your input.

Installation

Coming SoonPackage not yet published on npm.

pnpm add @chadcn/ui

Usage

import "@chadcn/ui/styles.css"
import { Input } from "@chadcn/ui"

<Input />

Coming SoonPackage not yet published on npm.

Examples

Basic

import { Input } from "@chadcn/ui"

export function InputBasic() {
  return (
    <div className="w-full max-w-sm">
      <Input type="email" placeholder="Email" />
    </div>
  )
}

Field

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

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputField() {
  return (
    <div className="w-full max-w-sm">
      <Field>
        <FieldLabel>Username</FieldLabel>
        <Input placeholder="chadcn" />
        <FieldDescription>
          Choose a unique username for your account.
        </FieldDescription>
      </Field>
    </div>
  )
}

Field Group

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

import { Input } from "@chadcn/ui"
import { Button } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription, FieldGroup } from "@chadcn/ui"

export function InputFieldGroup() {
  return (
    <form className="space-y-4">
      <FieldGroup>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Input placeholder="Name" />
        </Field>
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Input type="email" placeholder="Email" />
          <FieldDescription>
            We'll send updates to this address.
          </FieldDescription>
        </Field>
      </FieldGroup>
      <div className="flex gap-2">
        <Button variant="outline" type="reset">Reset</Button>
        <Button type="submit">Submit</Button>
      </div>
    </form>
  )
}

Disabled

Use the disabled prop to disable the input.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputDisabled() {
  return (
    <Field data-disabled>
      <FieldLabel>Email</FieldLabel>
      <Input disabled type="email" placeholder="Email" />
      <FieldDescription>
        This field is currently disabled.
      </FieldDescription>
    </Field>
  )
}

Invalid

Use the aria-invalid prop to mark the input as invalid.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputInvalid() {
  return (
    <Field data-invalid>
      <FieldLabel>Invalid Input</FieldLabel>
      <Input aria-invalid type="email" placeholder="Email" />
      <FieldDescription>
        This field contains validation errors.
      </FieldDescription>
    </Field>
  )
}

File

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

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputFile() {
  return (
    <Field>
      <FieldLabel>Picture</FieldLabel>
      <Input type="file" />
      <FieldDescription>Select a picture to upload.</FieldDescription>
    </Field>
  )
}

Inline

Pair with Button to create a search input with a button.

import { Input } from "@chadcn/ui"
import { Button } from "@chadcn/ui"

export function InputInline() {
  return (
    <div className="flex gap-2">
      <Input placeholder="Search..." />
      <Button type="submit">Search</Button>
    </div>
  )
}

Grid

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

import { Input } from "@chadcn/ui"
import { Field, FieldLabel } from "@chadcn/ui"

export function InputGrid() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Field>
        <FieldLabel>First Name</FieldLabel>
        <Input placeholder="First Name" />
      </Field>
      <Field>
        <FieldLabel>Last Name</FieldLabel>
        <Input placeholder="Last Name" />
      </Field>
    </div>
  )
}

Required

Use the required attribute to indicate required inputs.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel, FieldDescription } from "@chadcn/ui"

export function InputRequired() {
  return (
    <Field>
      <FieldLabel>
        Required Field <span className="text-destructive">*</span>
      </FieldLabel>
      <Input required placeholder="This field is required" />
      <FieldDescription>This field must be filled out.</FieldDescription>
    </Field>
  )
}

Badge

Use Badge in the label to highlight a recommended field.

import { Input } from "@chadcn/ui"
import { Badge } from "@chadcn/ui"
import { Field, FieldLabel } from "@chadcn/ui"

export function InputBadge() {
  return (
    <Field>
      <FieldLabel className="flex items-center gap-2">
        Webhook URL <Badge variant="secondary">Beta</Badge>
      </FieldLabel>
      <Input placeholder="https://example.com/webhook" />
    </Field>
  )
}

Input Group

To add icons or text inside an input, use the InputGroup component.

import { Input } from "@chadcn/ui"
import { Field, FieldLabel } from "@chadcn/ui"
import { InputGroup, InputGroupText } from "@chadcn/ui"

export function InputGroupDemo() {
  return (
    <Field>
      <FieldLabel>Website URL</FieldLabel>
      <InputGroup>
        <InputGroupText>https://</InputGroupText>
        <Input placeholder="example.com" />
      </InputGroup>
    </Field>
  )
}