Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Input
A native input element.
import { Input } from "@/components/ui/input";
export default function Particle() {
return <Input aria-label="Enter text" placeholder="Enter text" type="text" />;
}
Installation
pnpm dlx shadcn@latest add @coss/input
Usage
import { Input } from "@/components/ui/input"<Input />API Reference
Input
Styled wrapper for Input from Base UI with custom size options.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | number | "default" | Controls the input height. Number values are passed to the native size attribute |
unstyled | boolean | false | When true, removes the wrapper styling (border, shadow, etc.) |
Examples
For accessible labelling and validation, prefer using the Field component to wrap inputs, or the FieldControl component. See some related examples.
Small Size
import { Input } from "@/components/ui/input";
export default function Particle() {
return (
<Input
aria-label="Enter text"
placeholder="Enter text"
size="sm"
type="text"
/>
);
}
Large Size
import { Input } from "@/components/ui/input";
export default function Particle() {
return (
<Input
aria-label="Enter text"
placeholder="Enter text"
size="lg"
type="text"
/>
);
}
Disabled
import { Input } from "@/components/ui/input";
export default function Particle() {
return (
<Input aria-label="Disabled" disabled placeholder="Disabled" type="text" />
);
}
File
import { Input } from "@/components/ui/input";
export default function Particle() {
return <Input aria-label="File" type="file" />;
}
With Label
import { useId } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function Particle() {
const id = useId();
return (
<div className="flex flex-col items-start gap-2">
<Label htmlFor={id}>Email</Label>
<Input
aria-label="Email"
id={id}
placeholder="[email protected]"
type="email"
/>
</div>
);
}
With Button
import { Button } from "@/components/ui/button";
import { Group } from "@/components/ui/group";
import { Input } from "@/components/ui/input";
export default function Particle() {
return (
<Group aria-label="Email subscription" className="gap-2">
<Input
aria-label="Email"
className="flex-1"
placeholder="[email protected]"
type="email"
/>
<div>
<Button variant="outline">Send</Button>
</div>
</Group>
);
}
Form Integration
"use client";
import type { FormEvent } from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
export default function Particle() {
const [loading, setLoading] = useState(false);
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
alert(`Email: ${formData.get("email") || ""}`);
};
return (
<Form className="max-w-64" onSubmit={onSubmit}>
<Field name="email">
<FieldLabel>Email</FieldLabel>
<Input
disabled={loading}
placeholder="[email protected]"
required
type="email"
/>
<FieldError>Please enter a valid email.</FieldError>
</Field>
<Button disabled={loading} type="submit">
Submit
</Button>
</Form>
);
}