- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Form
Component status | Contribution |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/fieldlabel@7.0.5 |
Usage notes
Form provides structure and spacing for your form fields.
Variants
Form (labels left)Contribution
Apply .spectrum-FieldLabel--left
to each FieldLabel to get left labels.
Show markup
<form class="spectrum-Form">
<div class="spectrum-Form-item">
<label for="fieldLabelExample-lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left">Company Title</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Textfield spectrum-Textfield--multiline">
<textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield-input"></textarea>
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-emailaddress">Email Address</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Textfield">
<input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
<div class="spectrum-Form-itemField">
<button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Interests</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label">Kittens</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label">Dogs</span>
</label>
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-stepper">Age</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Stepper">
<div class="spectrum-Textfield spectrum-Stepper-textfield">
<input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
</div>
<span class="spectrum-Stepper-buttons">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
</button>
</span>
</div>
</div>
</div>
</form>
Form (labels right)Contribution
Apply .spectrum-FieldLabel--right
to each FieldLabel to get right labels.
Show markup
<form class="spectrum-Form">
<div class="spectrum-Form-item">
<label for="fieldLabelExample-lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right">Company Title</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Textfield spectrum-Textfield--multiline">
<textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield-input"></textarea>
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-emailaddress">Email Address</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Textfield">
<input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Country</label>
<div class="spectrum-Form-itemField">
<button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Interests</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label">Kittens</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label">Dogs</span>
</label>
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-stepper">Age</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Stepper">
<div class="spectrum-Textfield spectrum-Stepper-textfield">
<input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
</div>
<span class="spectrum-Stepper-buttons">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
</button>
</span>
</div>
</div>
</div>
</form>
Form (labels above)Contribution
For labels above, the layout changes completely, so you must apply .spectrum-Form--labelsAbove
to the Form itself. You do not need to apply a specific class to the FieldLabel.
Show markup
<form class="spectrum-Form spectrum-Form--labelsAbove">
<div class="spectrum-Form-item">
<label for="fieldLabelExample-lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel">Company Title</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Textfield spectrum-Textfield--multiline">
<textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield-input"></textarea>
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="fieldLabelExample-emailaddress">Email Address</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Textfield">
<input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Country</label>
<div class="spectrum-Form-itemField">
<button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Interests</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label">Kittens</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label">Dogs</span>
</label>
</div>
</div>
</div>
<div class="spectrum-Form-item">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="fieldLabelExample-stepper">Age</label>
<div class="spectrum-Form-itemField">
<div class="spectrum-Stepper">
<div class="spectrum-Textfield spectrum-Stepper-textfield">
<input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
</div>
<span class="spectrum-Stepper-buttons">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp" tabindex="-1">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown" tabindex="-1">
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
</button>
</span>
</div>
</div>
</div>
</form>