Input

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/input
Copy

Usage#

Copy<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
</script>

Copy<Input />

Examples#

Variants#

Basic#

Field#

Use Field, Field.Label, and Field.Description to create an input with a label and description.

Field Group#

Use Field.Group to show multiple Field.Field blocks and to build forms.

Disabled#

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field.Field component.

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.Field component.

File#

Use the type="file" prop to create a file input.

Inline#

Use Field.Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

Grid#

Use a grid layout to place multiple inputs side by side.

Required#

Use the required attribute to indicate required inputs.

Badge#

Use Badge in the label to highlight a recommended field.

Input Group#

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

Button Group#

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

Form#

A full form example with multiple inputs, a select, and a button.

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

Input#

The Input component renders a styled HTML input element.