- 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
- 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 https://shadcn-cssinjs.com/r/input.json
Usage
import { Input } from "@/components/ui/input";<Input />Basic
import { Input } from "@/components/ui/input";
export function InputBasic() {
return <Input placeholder="Enter text" />;
}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,
FieldDescription,
FieldGroup,
FieldLabel,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";
export function InputInline() {
return (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";
export function InputBadge() {
return (Input Group
To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.
import { InfoIcon } from "lucide-react";
import { Field, FieldLabel } from "@/components/ui/field";
import {
InputGroup,
InputGroupAddon,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";
import { Input } from "@/components/ui/input";
export function InputButtonGroup() {Form
A full form example with multiple inputs, a select, and a button.
import { Button } from "@/components/ui/button";
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
مفتاح API الخاص بك مشفر ومخزن بأمان.
"use client";
import * as React from "react";
import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";