docs.mdx

import CodeView from '../../../shared/components/CodeView'; import CodeBlock from '../../../shared/components/CodeBlock'; import Example from '../../../shared/components/Example'; import Blockquote from '../../../shared/components/Blockquote'; import ButtonIcon from '../button-icons/'; import {FormElement} from './base/example'; import { Input } from '../input/base/example'; import { Checkbox } from '../checkbox/base/example'; import { Textarea } from '../textarea/base/example'; import { Avatar } from '../avatar/base/example'; import { Form } from '../form-layout/base/example'; import { CompoundForm } from '../form-layout/compound/example';

An HTML form element contains a HTML label and element

There are many types of form elements, including inputs, text areas, checkboxes, and radio buttons. Visit the individual component pages for in-depth details of specific states and visuals.

Structuring a form element

To create a form element, a <div> element with the class slds-form-element is required.

A form element is made up of three primary elements, the label (slds-form-element__label), a container (slds-form-element__control), and the form element, i.e. <input>.

Form Label

A form label should use the <label> element with the class slds-form-element__label.

Labels must have the for attribute applied, and its value must match the ID of the associated form element, like . This association ensures that assistive technology informs users about what information to enter where.

Form label

Form Control

A form control is a div with the class slds-form-element__control. The control is required to maintain the stucture of the form element.

Any form type goes here

States

Readonly/Static

A form might require it to be in a read only state at any particular time. Each element should be replaced with a <span> with the class slds-form-element__static.

Status

In Progress

Inline Edit

Status

In Progress

Condensed view

By default, the overall form element takes up 54px of vertical space. If you require a more condensed view of the form element, applying the class slds-form-element_small to the slds-form-element element will reduce the overall height to 45px.

Status

In Progress

Feedback

A form element can have various methods of feedback, such as a required denotation or an inline error message.

Required

When a form element is required, an <abbr> should be injected before the <input> and within the <label> and have the class slds-required.

The <input> element should also have the HTML attribute required or required="". Similarily, if it is disabled, it should have the disabled or disabled="" attribute. Do not use true/false values inside the required or disabled because the mere presence of these attributes signifies the field is required or disabled.

Error

If an error has occured while submitting a form, the form element with an error should provide feedback. The slds-has-error class is placed on the <div class="slds-form-element">. Then, the error message for the user is placed in a <span> with the slds-form-element__help class.

When a form element displays feedback notifying the user of an error, the error string should be linked to the element by adding the aria-describedby attribute to the . The `aria-describedby` attribute must reference the id of the error message. This configuration allows screen readers to read the associated error message when the invalid field is focused.

Layout

Layout helper classes are available through the following class names: slds-form_stacked and slds-form_horizontal. For optimal spacing and layout, ensure the slds-form-element class is present on each element within the form.

Stacked

To vertically stack <label> and <input> pairs, place slds-form_stacked on the wrapper of the form for optimal spacing.

Horizontal

To horizontally align a <label> and <input>, use the slds-form_horizontal class on the wrapper around the form. A slds-form-element__label takes up 33% of the width, and the slds-form-element__control uses the remaining 66%.

Compound

To use field level help with a `` (as opposed to a ``), the `` and the `

` with the help icon must be siblings. Additionally, you'll need to add the class `slds-form-element__legend_has-tooltip` to the ``. Only add this class when your `` has adjacent field level help, otherwise you'll experience unexpected layouts.

Usage Examples

Record Detail

A record detail is a series of rows created by slds-grid. Inside of each row contains up to 2 inline-editable form element.

Due to the nature of how the record details form is composed, we need to notify screen readers that this is a list by adding role="list" to the slds-form element. Every column inside of each row should get role="listitem" to identify itself as items of the list.

View Mode

Assigned to

Jack Rogers

Team Name

Salesforce Design System

Status

In Progress

Description

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
www.getslds.com

Edit Mode

<Textarea className="slds-textarea" id="description" defaultValue="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod." />