# Field (Shadcn UI kit) Combine labels, controls, and help text to compose accessible form fields and grouped inputs. ```twig
Payment Method All transactions are secure and encrypted Name on Card Card Number Enter your 16-digit card number
Month Year CVV
Billing Address The billing address associated with your payment method Same as shipping address Comments Submit Cancel
``` ## Installation ```shell bin/console ux:install field --kit shadcn ``` ## Usage ```twig Profile This appears on invoices and emails. Full name This appears on invoices and emails. Username Choose another username. Subscribe to the newsletter ``` ## Examples ### Input ```twig
Username Choose a unique username for your account. Password Must be at least 8 characters long.
``` ### Textarea ```twig
Feedback Share your thoughts about our service.
``` ### Select ```twig
Department Select your department or area of work.
``` ### Fieldset ```twig
Address information We need your address to deliver your order. Street address
City Postal code
``` ### Checkbox ```twig
Show these items on the desktop Select the items you want to show on the desktop. Hard disks External disks CDs, DVDs, and iPods Connected servers Sync Desktop & Documents folders Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
``` ### Switch ```twig Multi-factor authentication ``` ### Choice Card Wrap `Field` components inside `Field:Label` to create selectable field groups. This works with `RadioGroup:Item`, `Checkbox`, and `Switch` components. ```twig Compute Environment Select the compute environment for your cluster. Kubernetes Run GPU workloads on a K8s cluster. Virtual Machine Access a cluster to run GPU workloads. ``` ### Field Group ```twig
Responses Get notified when ChatGPT responds to requests that take time, like research or image generation. Push notifications Tasks Get notified when tasks you've created have updates. Manage tasks Push notifications Email notifications
``` ### RTL To enable RTL support, set the `dir="rtl"` attribute on the root element. ```twig
طريقة الدفع جميع المعاملات آمنة ومشفرة الاسم على البطاقة تعليقات إرسال إلغاء
שיטת תשלום כל העסקאות מאובטחות ומוגנות שם מלא הערות שלח בטל
``` ## API Reference ### `` | Prop | Type | Description | |:-------|:------|:-------------| | `orientation` | `'vertical'\|'horizontal'\|'responsive'` | The layout direction of the field. Defaults to `vertical` | | Block | Description | |:-------|:-------------| | `content` | The field content, typically includes `Field:Label` and form input(s) | ### `` | Block | Description | |:-------|:-------------| | `content` | The input and supplementary elements like `Field:Description` and `Field:Error` | ### `` | Block | Description | |:-------|:-------------| | `content` | The helper text describing the field | ### `` | Prop | Type | Description | |:-------|:------|:-------------| | `errors` | `array` | A list of error messages (strings or objects with a `message` property). Defaults to `[]` | | Block | Description | |:-------|:-------------| | `content` | Custom error content, overrides the `errors` prop if provided | ### `` | Block | Description | |:-------|:-------------| | `content` | The grouped fields, typically multiple `Field` components | ### `` | Block | Description | |:-------|:-------------| | `content` | The label text for the field | ### `` | Prop | Type | Description | |:-------|:------|:-------------| | `variant` | `'legend'\|'label'` | The text size variant. Defaults to `legend` | | Block | Description | |:-------|:-------------| | `content` | The legend text for a fieldset | ### `` | Block | Description | |:-------|:-------------| | `content` | Optional text displayed in the center of the separator | ### `` | Block | Description | |:-------|:-------------| | `content` | The fieldset content, typically includes `Field:Legend` and `Field` components | ### `` | Block | Description | |:-------|:-------------| | `content` | The title text for the field (non-label variant) |