shadcn.io is not affiliated with official shadcn/ui
Field examples · Advanced
Mixed Field Types with Separators for React
A contact fieldset and a textarea divided by a labeled separator.
A short form in two parts: Contact Information with phone and email inputs, then a FieldSeparator labeled Additional Details and a Textarea. The separator's text names the next section without adding another fieldset.
Preview
Installation
FAQ
What is the Additional Details line?
FieldSeparator takes Additional Details as its child, so that label sits on the rule between the contact set and the textarea. The separator sets data-content when it has a child.
What is the Contact Information line?
FieldDescription under the caption reads How should we get in touch with you? Phone and email are Fields in a nested FieldGroup.
The caption is a FieldLegend with variant set to label.
Why are the contact inputs tel and email?
Phone Number uses type tel, with placeholder +1 (555) 000-0000. Email Address uses type email, with placeholder you@example.com.
How tall is the additional information box?
The Textarea sets rows to 3. Its label is Additional Information, and the placeholder is Any other details you'd like to share.
Related
- Field Group with SeparatorTwo notification fieldsets of checkboxes
- Fieldset with LegendAn address fieldset with a legend, a
- Complex Multi-Field FormA personal information fieldset with
- Right Drawer Filter PanelA right drawer of product filters
- Choice Cards FieldRadio choice cards, each a bordered row
- Range Slider FieldA two-thumb price range slider whose