field

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/field/Field.astro directly.
3/**
4 * @component Field
5 * @title Field
6 * @description Composable form layout primitives for labels, descriptions, grouped controls, separators, and validation messages.
7 *
8 * @preview
9 *
10 * <div class="w-full max-w-md">
11 *   <form>
12 *     <FieldGroup>
13 *       <FieldSet>
14 *         <FieldLegend>Payment Method</FieldLegend>
15 *         <FieldDescription>
16 *           All transactions are secure and encrypted
17 *         </FieldDescription>
18 *         <FieldGroup>
19 *           <Field>
20 *             <FieldLabel for="checkout-7j9-card-name-43j">Name on Card</FieldLabel>
21 *             <Input id="checkout-7j9-card-name-43j" placeholder="Evil Rabbit" required />
22 *           </Field>
23 *           <Field>
24 *             <FieldLabel for="checkout-7j9-card-number-uw1">Card Number</FieldLabel>
25 *             <Input id="checkout-7j9-card-number-uw1" placeholder="1234 5678 9012 3456" required />
26 *             <FieldDescription>Enter your 16-digit card number</FieldDescription>
27 *           </Field>
28 *           <div class="grid grid-cols-3 gap-4">
29 *             <Field>
30 *               <FieldLabel for="checkout-exp-month-ts6">Month</FieldLabel>
31 *               <Select>
32 *                 <SelectTrigger id="checkout-exp-month-ts6">
33 *                   <SelectValue placeholder="MM" />
34 *                 </SelectTrigger>
35 *                 <SelectContent>
36 *                   <SelectGroup>
37 *                     <SelectItem value="01">01</SelectItem>
38 *                     <SelectItem value="02">02</SelectItem>
39 *                     <SelectItem value="03">03</SelectItem>
40 *                     <SelectItem value="04">04</SelectItem>
41 *                     <SelectItem value="05">05</SelectItem>
42 *                     <SelectItem value="06">06</SelectItem>
43 *                     <SelectItem value="07">07</SelectItem>
44 *                     <SelectItem value="08">08</SelectItem>
45 *                     <SelectItem value="09">09</SelectItem>
46 *                     <SelectItem value="10">10</SelectItem>
47 *                     <SelectItem value="11">11</SelectItem>
48 *                     <SelectItem value="12">12</SelectItem>
49 *                   </SelectGroup>
50 *                 </SelectContent>
51 *               </Select>
52 *             </Field>
53 *             <Field>
54 *               <FieldLabel for="checkout-7j9-exp-year-f59">Year</FieldLabel>
55// … truncated