Examples
Complete tng-form-field patterns that pair labels, controls, hints, and errors with copy-paste ready Plain-CSS and Tailwind CSS variants.
Form usage
Use the wrapper around TailNG control composition and field messages inside real form flows.
Form usage (Plain-CSS)
Form usage (Tailwind CSS)
Basic field
A vertical form field with one label, one control, and one hint.
Basic field (Plain-CSS)
Use a name your team will recognize.
Basic field (Tailwind CSS)
Use a name your team will recognize.
Supported controls
Each supported TailNG control can sit in the same label, control, hint, and error contract. Fields use the default above label in a two-column layout from 720px.
Supported controls (Plain-CSS)
Use the styled input component for simple text values.
Use the input-field shell when the input needs inner adornments.
Use the headless input-group primitive when you own the group shell styles.
Textarea keeps multiline entry in the same field contract.
Autocomplete supports custom option and selected templates, such as flags with labels.
MultiAutocomplete collects several searchable values.
Select uses the field shell for label and message rhythm.
MultiSelect keeps a multi-value trigger in one field.
Datepicker remains a single date field with calendar affordances.
Switch with a forced outlined frame and stacked label.
Toggle with a forced outlined frame and stacked label.
Radio with a forced outlined frame and stacked label.
Slider drawn inside an explicitly outlined frame.
Input OTP drawn inside an explicitly outlined frame.
Toggle group inside an explicitly outlined frame.
Button toggle group inside an explicitly outlined frame.
Checkbox with a forced outlined frame and stacked label.
Listbox inside an explicitly outlined frame.
Month/Day picker inside an explicitly outlined frame.
Year picker inside an explicitly outlined frame.
Supported controls (Tailwind CSS)
Use the styled input component for simple text values.
Use the input-field shell when the input needs inner adornments.
Use the headless input-group primitive when you own the group shell styles.
Textarea keeps multiline entry in the same field contract.
Autocomplete supports custom option and selected templates, such as flags with labels.
MultiAutocomplete collects several searchable values.
Select uses the field shell for label and message rhythm.
MultiSelect keeps a multi-value trigger in one field.
Datepicker remains a single date field with calendar affordances.
Switch with a forced outlined frame and stacked label.
Toggle with a forced outlined frame and stacked label.
Radio with a forced outlined frame and stacked label.
Slider drawn inside an explicitly outlined frame.
Input OTP drawn inside an explicitly outlined frame.
Toggle group inside an explicitly outlined frame.
Button toggle group inside an explicitly outlined frame.
Checkbox with a forced outlined frame and stacked label.
Listbox inside an explicitly outlined frame.
Month/Day picker inside an explicitly outlined frame.
Year picker inside an explicitly outlined frame.
Supported control label positions
The same supported controls—including input groups with prefix and suffix adornments—can place the label on the outline, above the border, or left of the border. Outline and above use a two-column layout from 720px; left uses a single column.
Supported controls (Outline)
Use the styled input component for simple text values.
Use type number for numeric-only values.
Use the input-field shell when the input needs inner adornments.
Use the headless input-group primitive when you own the group shell styles.
Textarea keeps multiline entry in the same field contract.
Autocomplete supports custom option and selected templates, such as flags with labels.
MultiAutocomplete collects several searchable values.
Select uses the field shell for label and message rhythm.
MultiSelect keeps a multi-value trigger in one field.
Datepicker remains a single date field with calendar affordances.
Switch with a forced outlined frame and stacked label.
Toggle with a forced outlined frame and stacked label.
Radio with a forced outlined frame and stacked label.
Slider drawn inside an explicitly outlined frame.
Input OTP drawn inside an explicitly outlined frame.
Toggle group inside an explicitly outlined frame.
Button toggle group inside an explicitly outlined frame.
Checkbox with a forced outlined frame and stacked label.
Listbox inside an explicitly outlined frame.
Month/Day picker inside an explicitly outlined frame.
Year picker inside an explicitly outlined frame.
Supported controls (Above)
Use the styled input component for simple text values.
Use type number for numeric-only values.
Use the input-field shell when the input needs inner adornments.
Use the headless input-group primitive when you own the group shell styles.
Textarea keeps multiline entry in the same field contract.
Autocomplete supports custom option and selected templates, such as flags with labels.
MultiAutocomplete collects several searchable values.
Select uses the field shell for label and message rhythm.
MultiSelect keeps a multi-value trigger in one field.
Datepicker remains a single date field with calendar affordances.
Switch with a forced outlined frame and stacked label.
Toggle with a forced outlined frame and stacked label.
Radio with a forced outlined frame and stacked label.
Slider drawn inside an explicitly outlined frame.
Input OTP drawn inside an explicitly outlined frame.
Toggle group inside an explicitly outlined frame.
Button toggle group inside an explicitly outlined frame.
Checkbox with a forced outlined frame and stacked label.
Listbox inside an explicitly outlined frame.
Month/Day picker inside an explicitly outlined frame.
Year picker inside an explicitly outlined frame.
Supported controls (Left)
Use the styled input component for simple text values.
Use type number for numeric-only values.
Use the input-field shell when the input needs inner adornments.
Use the headless input-group primitive when you own the group shell styles.
Textarea keeps multiline entry in the same field contract.
Autocomplete supports custom option and selected templates, such as flags with labels.
MultiAutocomplete collects several searchable values.
Select uses the field shell for label and message rhythm.
MultiSelect keeps a multi-value trigger in one field.
Datepicker remains a single date field with calendar affordances.
Switch with a forced outlined frame and stacked label.
Toggle with a forced outlined frame and stacked label.
Radio with a forced outlined frame and stacked label.
Slider drawn inside an explicitly outlined frame.
Input OTP drawn inside an explicitly outlined frame.
Toggle group inside an explicitly outlined frame.
Button toggle group inside an explicitly outlined frame.
Checkbox with a forced outlined frame and stacked label.
Listbox inside an explicitly outlined frame.
Month/Day picker inside an explicitly outlined frame.
Year picker inside an explicitly outlined frame.
Left label
Use labelPosition left when dense forms need labels to sit beside the bordered control frame.
Left label field (Plain-CSS)
Lowercase letters and hyphens only.
Left label field (Tailwind CSS)
Lowercase letters and hyphens only.
Error state with input group
Nest an input group when the control needs prefix or suffix content, and let the field own message visibility.
Invalid input group field (Plain-CSS)
Whole dollars only.
Budget is required.
Invalid input group field (Tailwind CSS)
Whole dollars only.
Budget is required.
Inline controls
Switch, toggle, and single checkbox auto-adopt the inline-trailing layout: the label sits to the right of the control on the same row, no outlined frame.
We'll occasionally send product updates.
Toggle bold formatting.
Composite controls
Slider, listbox, input-otp, toggle-group, month-day picker, year picker, and single radio all sit inside a plain frame — the control draws its own chrome while the form-field owns label and messages.
0–100, in steps of 1.
Enter the six-digit code from your email.
One radio per option.