A text input component for forms and user data entry with built-in styling and accessibility features.
1import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";2import { Input } from "@/components/ui/input";34export default function Preview() {Installation
pnpm dlx sprawlify@latest add inputnpx sprawlify@latest add inputyarn sprawlify@latest add inputbunx --bun sprawlify@latest add input
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/solidnpm install @sprawlify/primitives @sprawlify/solidyarn add @sprawlify/primitives @sprawlify/solidbun add @sprawlify/primitives @sprawlify/solid
Add the following files to your project:
1import { cn } from "@/lib/utils";2import { sprawlify } from "@sprawlify/solid";3import type { ComponentProps } from "solid-js";4import { splitProps } from "solid-js";56function Input(props: ComponentProps<typeof sprawlify.input>) {7 const [local, others] = splitProps(props, ["class", "type"]);89 return (10 <sprawlify.input11 type={local.type}12 data-scope="input"13 data-part="root"14 data-slot="input"15 class={cn(16 "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-input/30 px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-input/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",17 local.class,18 )}19 {...others}20 />21 );22}2324export { Input };25Update the import paths to match your project setup.
Usage
1import { Input } from "@/components/ui/input"1<Input />Examples
Badge
Use Badge in the label to highlight a recommended field.
1import { Badge } from "@/components/ui/badge";2import { Field, FieldLabel } from "@/components/ui/field";3import { Input } from "@/components/ui/input";4Basic
1import { Input } from "@/components/ui/input";23export default function Preview() {4 return <Input class="max-w-sm" type="email" placeholder="Email" />;Button Group
To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.
1import { Button } from "@/components/ui/button";2import { ButtonGroup } from "@/components/ui/button-group";3import { Field, FieldLabel } from "@/components/ui/field";4import { Input } from "@/components/ui/input";Disabled
Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.
1import { Field, FieldLabel } from "@/components/ui/field";2import { Input } from "@/components/ui/input";34export default function Preview() {Field
Use Field, FieldLabel, and FieldDescription to create an input with a label and description.
1import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";2import { Input } from "@/components/ui/input";34export default function Preview() {Field Group
Use FieldGroup to show multiple Field blocks and to build forms.
1import { Button } from "@/components/ui/button";2import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";3import { Input } from "@/components/ui/input";4File
Use the type="file" prop to create a file input.
1import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";2import { Input } from "@/components/ui/input";34export default function Preview() {Grid
Use a grid layout to place multiple inputs side by side.
1import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";2import { Input } from "@/components/ui/input";34export default function Preview() {Inline
Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.
1import { Button } from "@/components/ui/button";2import { Field } from "@/components/ui/field";3import { Input } from "@/components/ui/input";4Input Group
To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.
1import { Field, FieldLabel } from "@/components/ui/field";2import {3 InputGroup,4 InputGroupAddon,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.
1import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";2import { Input } from "@/components/ui/input";34export default function Preview() {Required
Use the required attribute to indicate required inputs.
1import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";2import { Input } from "@/components/ui/input";34export default function Preview() {On This Page
InstallationUsageExamplesBadgeBasicButton GroupDisabledFieldField GroupFileGridInlineInput GroupInvalidRequiredGet PRO
Need premium blocks and templates? Upgrade to PRO and get access.