A text input component for forms and user data entry with built-in styling and accessibility features.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Input } from "@/components/ui/input"
4</script>
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/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1export { default as Input } from "./input.svelte";21<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLInputAttributes } from "svelte/elements"
5
6interface Props extends HTMLInputAttributes, PolymorphicProps<"input"> {}
7
8let { class: className, type, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="input"
13 type={type}
14 data-scope="input"
15 data-part="root"
16 data-slot="input"
17 class={cn(
18 "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",
19 className
20 )}
21 {...rest}
22/>Update 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.
1<script lang="ts">
2import { Badge } from "@/components/ui/badge"
3import { Field, FieldLabel } from "@/components/ui/field"
4import { Input } from "@/components/ui/input"
Basic
1<script lang="ts">
2import { Input } from "@/components/ui/input"
3</script>
4
Button Group
To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { ButtonGroup } from "@/components/ui/button-group"
4import { Field, FieldLabel } from "@/components/ui/field"
Disabled
Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Input } from "@/components/ui/input"
4</script>
Field
Use Field, FieldLabel, and FieldDescription to create an input with a label and description.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Input } from "@/components/ui/input"
4</script>
Field Group
Use FieldGroup to show multiple Field blocks and to build forms.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Input } from "@/components/ui/input"
4</script>
File
Use the type="file" prop to create a file input.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Input } from "@/components/ui/input"
4</script>
Grid
Use a grid layout to place multiple inputs side by side.
1<script lang="ts">
2import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
3import { Input } from "@/components/ui/input"
4</script>
Inline
Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { Field } from "@/components/ui/field"
4import { Input } from "@/components/ui/input"
Input Group
To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.
1<script lang="ts">
2import { Field, FieldLabel } from "@/components/ui/field"
3import {
4 InputGroup,
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.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Input } from "@/components/ui/input"
4</script>
Required
Use the required attribute to indicate required inputs.
1<script lang="ts">
2import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
3import { Input } from "@/components/ui/input"
4</script>
On This Page
InstallationUsageExamplesBadgeBasicButton GroupDisabledFieldField GroupFileGridInlineInput GroupInvalidRequiredGet PRO
Need premium blocks and templates? Upgrade to PRO and get access.