Your API key is encrypted and stored securely.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
export function InputDemo() {
return (Installation
pnpm slabui add input
Usage
import { Input } from "@/components/ui/input"<Input />Examples
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"
export function InputField() {
return (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,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"
export function InputDisabled() {
return (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"
export function InputInvalid() {
return (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"
export function InputFile() {
return (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() {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"
export function InputGrid() {
return (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"
export function InputRequired() {
return (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() {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,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"
Form
A full form example with multiple inputs, a select, and a button.
import { Button } from "@/components/ui/button"
import {
Field,
FieldDescription,
FieldGroup,