'/%3e%3cpath%20d='M178.8%2051C182.335%2051%20185.2%2053.8654%20185.2%2057.4V83C185.2%2086.5346%20182.335%2089.4%20178.8%2089.4H114.8C111.6%2089.4%20108.4%2092.6%20108.4%2095.8V121.4C108.4%20124.935%20105.535%20127.8%20102%20127.8H76.4002C72.8656%20127.8%2070.0002%20124.935%2070.0002%20121.4V95.8C70.0002%2092.2654%2072.8656%2089.4%2076.4002%2089.4H102C105.2%2089.4%20108.4%2086.2%20108.4%2083V57.4C108.4%2053.8654%20111.266%2051%20114.8%2051H178.8Z'%20fill='oklch(0.643%200.19%20270.83)'/%3e%3c/svg%3e)
formlayout
field
Form field layout helpers.
pnpm dlx shadcn@latest add fieldLive preview
Interactive example with the installed component.
Used for account recovery.
Use it when
Start with the component when this interaction is the smallest useful building block. Compose a Fenod block when the user needs a full workflow instead.
Illustration brief
Minimal UI illustration, form controls with labels and a single action, warm off-white background, olive charcoal accents, thin borders, no gradients, no text, no logos, no device mockup.
Related components
Shares an interaction or layout role with Field.