docs/components/input
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
A field that allows users to enter text.
PreviewCode
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/input
import { Input } from "@/components/ui/input";
<Input />
Control the value with value and onChange.
PreviewCode
Character count: 0
Use the disabled prop to disable the input.
PreviewCode
The field is currently disabled
Use the invalid prop to mark the input as invalid.
PreviewCode
Please enter a valid email address
Use the size prop to change the input height.
PreviewCode
PreviewCode
PreviewCode
Use Field components to create an input with a label and a description.
PreviewCode
Username
Choose a unique username for your account
Use FieldGroup to show multiple Field blocks and to build forms.
PreviewCode
Name
We'll use this email to contact you
SubmitReset
Use the type="file" prop to create a file input.
PreviewCode
Picture
Choose a picture for your profile
Dedicated File Upload component
For more advanced file upload functionality, use the FileUpload component instead.
Use the orientation="horizontal" prop to create an inline input.
PreviewCode
PreviewCode
First name
Last name
Address
Use Badge in the label to highlight a recommended field.
PreviewCode
Webhook URLBeta
Use InputGroup to create an input group.
PreviewCode
Use ButtonGroup to create a button group.
PreviewCode
Text input. Accepts all native input attributes.
| Prop | Type | Default |
|---|---|---|
size | `"sm" | "md" |
type | string | text |
className | string | - |
For a complete list of props, see the Ark UI documentation.
[
Previous page
Input OTP ](/docs/components/input-otp)[
Next page
Item ](/docs/components/item)
On This Page
InstallationUsageControlledStatesDisabledInvalidSizesSmallMediumLargeExamplesWith FieldField GroupFileInlineGridBadgeInput GroupButton GroupAPI ReferenceInput