1<script lang="ts"> 2 import { Input } from '../input/index.js'; 3 import * as Field from './index.js'; 4</script> 5 6<div class="w-full max-w-md"> 7 <Field.Group> 8 <Field.Field> 9 <Field.Label for="username-preview">Username</Field.Label> 10 <Input id="username-preview" placeholder="shadcn" /> 11 <Field.Description>This is your public display name.</Field.Description> 12 </Field.Field> 13 </Field.Group> 14</div> 15

Installation

Usage

Use field to wrap form controls with labels, descriptions, and errors. Compose Field.Group and Field.Set for multi-field layouts. Set orientation to vertical, horizontal, or responsive.

1<script lang="ts">
2	import * as Field from '~/components/field';
3	import { Input } from '~/components/input';
4</script>
5
6<Field.Group>
7	<Field.Field>
8		<Field.Label for="username">Username</Field.Label>
9		<Input id="username" placeholder="shadcn" />
10		<Field.Description>This is your public display name.</Field.Description>
11	</Field.Field>
12</Field.Group>