Astro Input Component

---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field>
  <FieldLabel for="input-demo-api-key">API Key</FieldLabel>
  <Input id="input-demo-api-key" type="password" placeholder="sk-..." />
  <FieldDescription>
    Your API key is encrypted and stored securely.
  </FieldDescription>
</Field>

Installation

npx shadcn@latest add @fulldev/input

Usage

import { Input } from "@/components/ui/input"

<Input />

Input renders a native input and passes every attribute through, so use type, name, required, and disabled as in HTML. Pair it with Field for a label, description, and error.

Basic

Field

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

---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field>
  <FieldLabel for="input-field-username">Username</FieldLabel>
  <Input
    id="input-field-username"
    type="text"
    placeholder="Enter your username"
  />
  <FieldDescription>
    Choose a unique username for your account.
  </FieldDescription>
</Field>

Field Group

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

---
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<FieldGroup>
  <Field>
    <FieldLabel for="fieldgroup-name">Name</FieldLabel>
    <Input id="fieldgroup-name" placeholder="Jordan Lee" />
  </Field>
  <Field>
    <FieldLabel for="fieldgroup-email">Email</FieldLabel>
    <Input id="fieldgroup-email" type="email" placeholder="name@example.com" />
    <FieldDescription>
      We&apos;ll send updates to this address.
    </FieldDescription>
  </Field>
  <Field orientation="horizontal">
    <Button type="reset" variant="outline">
      Reset
    </Button>
    <Button type="submit">Submit</Button>
  </Field>
</FieldGroup>

Disabled

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

---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field data-disabled="true">
  <FieldLabel for="input-demo-disabled">Email</FieldLabel>
  <Input id="input-demo-disabled" type="email" placeholder="Email" disabled />
  <FieldDescription>This field is currently disabled.</FieldDescription>
</Field>

Invalid

Use aria-invalid="true" to mark the input as invalid. To style the invalid state, add data-invalid="true" to the Field component.

---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field data-invalid="true">
  <FieldLabel for="input-invalid">Invalid Input</FieldLabel>
  <Input id="input-invalid" placeholder="Error" aria-invalid="true" />
  <FieldDescription>This field contains validation errors.</FieldDescription>
</Field>

File

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

---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field>
  <FieldLabel for="picture">Picture</FieldLabel>
  <Input id="picture" type="file" />
  <FieldDescription>Select a picture to upload.</FieldDescription>
</Field>

Inline

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

---
import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field orientation="horizontal">
  <Input type="search" placeholder="Search..." />
  <Button>Search</Button>
</Field>

Grid

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

---
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<FieldGroup class="grid max-w-sm grid-cols-2">
  <Field>
    <FieldLabel for="first-name">First Name</FieldLabel>
    <Input id="first-name" placeholder="Jordan" />
  </Field>
  <Field>
    <FieldLabel for="last-name">Last Name</FieldLabel>
    <Input id="last-name" placeholder="Lee" />
  </Field>
</FieldGroup>

Required

Use the required attribute to indicate required inputs.

---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field>
  <FieldLabel for="input-required">
    Required Field <span class="text-destructive">*</span>
  </FieldLabel>
  <Input id="input-required" placeholder="This field is required" required />
  <FieldDescription>This field must be filled out.</FieldDescription>
</Field>

Badge

Use Badge in the label to highlight a recommended field.

---
import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field>
  <FieldLabel for="input-badge">
    Webhook URL{" "}
    <Badge variant="secondary" class="ml-auto">
      Beta
    </Badge>
  </FieldLabel>
  <Input
    id="input-badge"
    type="url"
    placeholder="https://api.example.com/webhook"
  />
</Field>

Input Group

To add icons, text, or buttons inside an input, use Input Group.

---
import InfoIcon from "@lucide/astro/icons/info"

import { Field, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
---

<Field>
  <FieldLabel for="input-group-url">Website URL</FieldLabel>
  <InputGroup>
    <InputGroupInput id="input-group-url" placeholder="example.com" />
    <InputGroupAddon>
      <InputGroupText>https://</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InfoIcon />
    </InputGroupAddon>
  </InputGroup>
</Field>

Button Group

To add buttons to an input, use Button Group.

---
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
---

<Field>
  <FieldLabel for="input-button-group">Search</FieldLabel>
  <ButtonGroup>
    <Input id="input-button-group" placeholder="Type to search..." />
    <Button variant="outline">Search</Button>
  </ButtonGroup>
</Field>

Form

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

---
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const countries = [
  { label: "United States", value: "us" },
  { label: "United Kingdom", value: "uk" },
  { label: "Canada", value: "ca" },
]
---

<form class="w-full max-w-sm">
  <FieldGroup>
    <Field>
      <FieldLabel for="form-name">Name</FieldLabel>
      <Input id="form-name" type="text" placeholder="Evil Rabbit" required />
    </Field>
    <Field>
      <FieldLabel for="form-email">Email</FieldLabel>
      <Input id="form-email" type="email" placeholder="john@example.com" />
      <FieldDescription>
        We&apos;ll never share your email with anyone.
      </FieldDescription>
    </Field>
    <div class="grid grid-cols-2 gap-4">
      <Field>
        <FieldLabel for="form-phone">Phone</FieldLabel>
        <Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
      </Field>
      <Field>
        <FieldLabel for="form-country">Country</FieldLabel>
        <Select defaultValue="us">
          <SelectTrigger id="form-country" class="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {countries.map((country) => (
                <SelectItem value={country.value}>{country.label}</SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
      </Field>
    </div>
    <Field>
      <FieldLabel for="form-address">Address</FieldLabel>
      <Input id="form-address" type="text" placeholder="123 Main St" />
    </Field>
    <Field orientation="horizontal">
      <Button type="button" variant="outline">
        Cancel
      </Button>
      <Button type="submit">Submit</Button>
    </Field>
  </FieldGroup>
</form>

RTL

---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const translations = {
  en: {
    dir: "ltr",
    values: {
      apiKey: "API Key",
      placeholder: "sk-...",
      description: "Your API key is encrypted and stored securely.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      apiKey: "مفتاح API",
      placeholder: "sk-...",
      description: "مفتاح API الخاص بك مشفر ومخزن بأمان.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      apiKey: "מפתח API",
      placeholder: "sk-...",
      description: "מפתח ה-API שלך מוצפן ונשמר בצורה מאובטחת.",
    },
  },
}

const { dir, values: t } = translations.ar
---

<Field dir={dir}>
  <FieldLabel for="input-rtl-api-key">{t.apiKey}</FieldLabel>
  <Input
    id="input-rtl-api-key"
    type="password"
    placeholder={t.placeholder}
    dir={dir}
  />
  <FieldDescription>{t.description}</FieldDescription>
</Field>

API Reference

Source: src/components/ui/input

Input accepts all native input attributes and class. It sets data-slot="input" (override it with data-slot) and renders multiple only when it is truthy.

Menu