- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Your API key is encrypted and stored securely.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
Installation
pnpm dlx shadcn@latest add input
Usage
import { Input } from "@/components/ui/input"<Input />Examples
Basic
import { Input } from "@/components/ui/input"
export function InputBasic() {Field
Use Field, FieldLabel, and FieldDescription to create an input with a
label and description.
Choose a unique username for your account.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
Field Group
Use FieldGroup to show multiple Field blocks and to build forms.
We'll send updates to this address.
import { Button } from "@/components/ui/button"
import {
Field,Disabled
Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.
This field is currently disabled.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
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.
This field contains validation errors.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
File
Use the type="file" prop to create a file input.
Select a picture to upload.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
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"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"
Required
Use the required attribute to indicate required inputs.
This field must be filled out.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
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"Input Group
To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.
import { Field, FieldLabel } from "@/components/ui/field"
import {
InputGroup,Button Group
To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"Form
A full form example with multiple inputs, a select, and a button.
import { Button } from "@/components/ui/button"
import {
Field,