# Input (Shadcn UI kit) A text input component for forms and user data entry with built-in styling and accessibility features. ```twig
API Key Your API key is encrypted and stored securely.
``` ## Installation ```shell bin/console ux:install input --kit shadcn ``` ## Usage ```twig ``` ## Examples ### Basic ```twig
``` ### Field Use `Field`, `Field:Label`, and `Field:Description` to create an input with a label and description. ```twig
Username Choose a unique username for your account.
``` ### Field Group Use `Field:Group` to show multiple `Field` blocks and to build forms. ```twig
Name Email We'll send updates to this address. Reset Submit
``` ### Disabled Use the `disabled` prop to disable the input. To style the disabled state, add the `data-disabled` attribute to the `Field` component. ```twig
Email This field is currently disabled.
``` ### 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. ```twig
Invalid Input This field contains validation errors.
``` ### File Use the `type="file"` prop to create a file input. ```twig
Picture Select a picture to upload.
``` ### Inline Use `Field` with `orientation="horizontal"` to create an inline input. Pair with `Button` to create a search input with a button. ```twig
Search
``` ### Grid Use a grid layout to place multiple inputs side by side. ```twig First Name Last Name ``` ### Required Use the `required` attribute to indicate required inputs. ```twig
Required Field * This field must be filled out.
``` ### Badge Use `Badge` in the label to highlight a recommended field. ```twig
Webhook URL Beta
``` ### Input Group To add icons, text, or buttons inside an input, use the `InputGroup` component. ```twig
Website URL https://
``` ### Button Group To add buttons to an input, use the `ButtonGroup` component. ```twig
Search Search
``` ### Form A full form example with multiple inputs, a select, and a button. ```twig
Name Email We'll never share your email with anyone.
Phone Country
Address Cancel Submit
``` ### RTL To enable RTL support, set the `dir="rtl"` attribute on the root element. ```twig
مفتاح API مفتاح API الخاص بك مشفر ومخزن بأمان.
קוד API קוד ה-API שלך מוצן ומאוחסן בצורה מאובטחת.
```