{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "FormElement", "description": "Creates layout for a form element", "structure": { "name": "root", "restrict": [ "div", "fieldset" ], "description": "Creates layout for a form element", "children": [ { "name": "label", "restrict": [ "label", "span" ], "description": "Creates label styles for our form elements", "slot": { "name": "label", "required": true }, "children": [ { "name": "labelRequiredIndicator", "restrict": [ "abbr" ], "description": "Required asterisk", "attributes": { "static": { "class": "slds-required", "title": "required", "aria-hidden": "true" } } } ], "attributes": { "static": { "class": "slds-form-element__label" } } }, { "name": "legend", "restrict": [ "legend" ], "description": "The form element label when applied to a legend element", "children": [ { "name": "legendRequiredIndicator", "restrict": [ "abbr" ], "description": "Required asterisk", "attributes": { "static": { "class": "slds-required", "title": "required", "aria-hidden": "true" } } } ], "attributes": { "static": { "class": "slds-form-element__legend slds-form-element__label" } } }, { "name": "helpIcon", "restrict": [ "div" ], "description": "When an icon sits within a form element wrapper and adjacent to another element inside that wrapper such as a .form-element__label", "renderWhen": "slotFilled", "slot": { "name": "helpIcon" }, "children": [ { "name": "helpIconButton", "restrict": [ "button" ], "description": "Help-icon trigger button.", "children": [ { "name": "helpIconSvg", "description": "Help icon svg glyph.", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "children": [ { "name": "helpIconUse" } ] }, { "name": "helpIconAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label for the help button.", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon" } } }, { "name": "helpTooltip", "restrict": [ "div" ], "description": "Tooltip popover that surfaces help text on hover/focus of the help button.", "children": [ { "name": "helpTooltipBody", "restrict": [ "div" ], "description": "Help tooltip body content.", "attributes": { "static": { "class": "slds-popover__body" } } } ], "attributes": { "static": { "class": "slds-popover slds-popover_tooltip slds-nubbin_bottom-left", "role": "tooltip" } } } ], "attributes": { "static": { "class": "slds-form-element__icon" } } }, { "name": "control", "restrict": [ "div" ], "description": "Wrapper to any form display element", "slot": { "name": "default", "required": true }, "children": [ { "name": "staticContent", "restrict": [ "div" ], "description": "Read-only components are used to display immutable data within a form. Initializes read-only form element", "attributes": { "static": { "class": "slds-form-element__static" } }, "modifiers": [ { "name": "longform", "attribute": "class", "value": "slds-text-longform", "description": "Long-form prose styling for read-only description fields." } ], "children": [ { "name": "staticAvatar", "attributes": { "static": { "class": "slds-avatar slds-avatar_x-small slds-avatar_circle slds-m-right_xx-small" } } }, { "name": "staticBooleanIcon", "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-steps slds-current-color" } }, "children": [ { "name": "staticBooleanIconSvg", "attributes": { "static": { "class": "slds-icon slds-icon_x-small", "aria-hidden": "true" } }, "children": [ { "name": "staticBooleanIconUse" } ] }, { "name": "staticBooleanAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "staticRichText", "attributes": { "static": { "class": "slds-rich-text-editor__output" } }, "children": [ { "name": "staticRichTextParagraph" }, { "name": "staticRichTextImage" }, { "name": "staticRichTextBreak" } ] }, { "name": "staticLink" } ] }, { "name": "editAction", "restrict": [ "button" ], "description": "Inline-edit trigger button rendered in the read-only view.", "renderWhen": { "prop": "readonly", "eq": "true" }, "children": [ { "name": "editActionSvg", "description": "Edit icon svg.", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_hint" } }, "children": [ { "name": "editActionUse" } ] }, { "name": "editActionAssistiveText", "restrict": [ "span" ], "description": "Visually hidden label for the edit button.", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon" } } }, { "name": "input", "attributes": { "static": { "class": "slds-input" } } }, { "name": "textarea", "attributes": { "static": { "class": "slds-textarea" } } }, { "name": "checkbox", "attributes": { "static": { "class": "slds-checkbox" } }, "modifiers": [ { "name": "standalone", "attribute": "class", "value": "slds-checkbox_standalone", "description": "Renders a checkbox without an inline label (used in inline-edit cells)." } ], "children": [ { "name": "checkboxFaux", "attributes": { "static": { "class": "slds-checkbox_faux" } } }, { "name": "checkboxLabel", "attributes": { "static": { "class": "slds-checkbox__label" } } } ] }, { "name": "radio", "attributes": { "static": { "class": "slds-radio" } }, "children": [ { "name": "radioFaux", "attributes": { "static": { "class": "slds-radio_faux" } } }, { "name": "radioLabel", "attributes": { "static": { "class": "slds-radio__label" } } } ] }, { "name": "comboboxContainer", "attributes": { "static": { "class": "slds-combobox_container" } }, "children": [ { "name": "combobox", "attributes": { "static": { "class": "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" } }, "children": [ { "name": "comboboxFormElement", "attributes": { "static": { "class": "slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right", "role": "none" } }, "children": [ { "name": "comboboxInput", "attributes": { "static": { "class": "slds-input slds-combobox__input", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "false", "aria-haspopup": "listbox" } }, "modifiers": [ { "name": "withValue", "attribute": "class", "value": "slds-combobox__input-value", "description": "Applied when the combobox input currently displays a selected value." } ] }, { "name": "comboboxIcon", "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right" } }, "children": [ { "name": "comboboxIconSvg", "attributes": { "static": { "class": "slds-icon slds-icon_x-small slds-icon-text-default", "aria-hidden": "true" } }, "children": [ { "name": "comboboxIconUse" } ] } ] } ] }, { "name": "comboboxDropdown", "attributes": { "static": { "class": "slds-dropdown slds-dropdown_fluid", "role": "listbox", "aria-busy": "false" } }, "variants": [ { "name": "length", "description": "Maximum visible-row sizing for the dropdown.", "options": [ { "value": "5", "class": "slds-dropdown_length-5" }, { "value": "7-with-icon", "class": "slds-dropdown_length-with-icon-7" } ] } ], "children": [ { "name": "comboboxListbox", "attributes": { "static": { "class": "slds-listbox slds-listbox_vertical", "role": "presentation" } } } ] } ] } ] }, { "name": "duelingList", "attributes": { "static": { "class": "slds-dueling-list" } }, "children": [ { "name": "duelingListLiveRegion", "attributes": { "static": { "class": "slds-assistive-text", "aria-live": "assertive" } } }, { "name": "duelingListDragLabel", "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "duelingListColumn", "attributes": { "static": { "class": "slds-dueling-list__column" } }, "modifiers": [ { "name": "responsive", "attribute": "class", "value": "slds-dueling-list__column_responsive", "description": "Responsive sizing for the option columns of the dueling list." } ], "children": [ { "name": "duelingListOptions", "attributes": { "static": { "class": "slds-dueling-list__options" } }, "children": [ { "name": "duelingListListbox", "attributes": { "static": { "class": "slds-listbox slds-listbox_vertical", "role": "listbox", "aria-multiselectable": "true" } }, "children": [ { "name": "duelingListItem", "attributes": { "static": { "class": "slds-listbox__item", "role": "presentation" } }, "children": [ { "name": "duelingListOption", "attributes": { "static": { "class": "slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline", "role": "option", "aria-selected": "false" } }, "children": [ { "name": "duelingListOptionBody", "attributes": { "static": { "class": "slds-media__body" } }, "children": [ { "name": "duelingListOptionText", "attributes": { "static": { "class": "slds-truncate" } } } ] } ] } ] } ] } ] }, { "name": "duelingListMoveButton", "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-container" } }, "children": [ { "name": "duelingListMoveSvg", "attributes": { "static": { "class": "slds-button__icon", "aria-hidden": "true" } }, "children": [ { "name": "duelingListMoveUse" } ] }, { "name": "duelingListMoveAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] } ] }, { "name": "inFieldIconButton", "attributes": { "static": { "class": "slds-button slds-button_icon slds-input__icon slds-input__icon_right" } }, "children": [ { "name": "inFieldIconSvg", "attributes": { "static": { "class": "slds-button__icon", "aria-hidden": "true" } }, "children": [ { "name": "inFieldIconUse" } ] }, { "name": "inFieldIconAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ], "attributes": { "static": { "class": "slds-form-element__control" } }, "modifiers": [ { "name": "inputHasIcon", "attribute": "class", "value": "slds-input-has-icon", "description": "Applied to the control wrapper when an icon (e.g. datepicker trigger) is rendered inside the input field." }, { "name": "inputHasIconRight", "attribute": "class", "value": "slds-input-has-icon_right", "description": "Positions the in-field icon on the trailing edge." } ] }, { "name": "help", "restrict": [ "div" ], "description": "Creates inline help styles, sits below .form-element__control", "renderWhen": "slotFilled", "slot": { "name": "help" }, "attributes": { "static": { "class": "slds-form-element__help" } } }, { "name": "group", "restrict": [ "div" ], "description": "Inner wrapper used by deprecated compound layouts to group a stack of compound rows together.", "renderWhen": { "prop": "layout", "eq": "compoundDeprecated" }, "attributes": { "static": { "class": "slds-form-element__group" } } }, { "name": "row", "restrict": [ "div" ], "description": "Single row inside a compound or address form element; lays out sibling form-elements side by side.", "children": [ { "name": "rowItem", "restrict": [ "div" ], "description": "Sizing wrapper around a child form-element inside a compound row.", "repeats": true, "variants": [ { "name": "size", "description": "Column-sizing utility applied to a single field cell inside a compound row.", "options": [ { "value": "1-of-1", "class": "slds-size_1-of-1" }, { "value": "1-of-2", "class": "slds-size_1-of-2" }, { "value": "2-of-6", "class": "slds-size_2-of-6" }, { "value": "4-of-6", "class": "slds-size_4-of-6" } ] } ] } ], "attributes": { "static": { "class": "slds-form-element__row" } } } ], "attributes": { "static": { "class": "slds-form-element" } }, "modifiers": [ { "name": "stacked", "attribute": "class", "value": "slds-form-element_stacked", "description": "Vertical form elements with label stacked on top of control" }, { "name": "horizontal", "attribute": "class", "value": "slds-form-element_horizontal", "description": "Horizontal form elements with label left-aligned to the control" }, { "name": "edit", "attribute": "class", "value": "slds-form-element_edit", "description": "Modifier on slds-form-element that it needs to reserve space for the inline-edit trigger button" }, { "name": "compound", "attribute": "class", "value": "slds-form-element_compound", "description": "Creates a form that consists of multiple form groups" }, { "name": "address", "attribute": "class", "value": "slds-form-element_address", "description": "Creates a form that consists of multiple form groups specific to an address form" }, { "name": "oneCol", "attribute": "class", "value": "slds-form-element_1-col", "description": "Spans a single column in the record-detail grid." }, { "name": "hintParent", "attribute": "class", "value": "slds-hint-parent", "description": "Marks the form element as the hint-parent that reveals the inline-edit button on hover/focus." }, { "name": "dropdownTrigger", "attribute": "class", "value": "slds-dropdown-trigger", "description": "Marks the form element as a dropdown trigger (used when the inline-edit control opens a popover such as a datepicker)." }, { "name": "dropdownTriggerClick", "attribute": "class", "value": "slds-dropdown-trigger_click", "description": "Click-open variant of the dropdown trigger." }, { "name": "compoundFormDeprecated", "attribute": "class", "value": "slds-form_compound", "description": "Deprecated compound-form wrapper class retained for legacy compound/address blueprints." }, { "name": "formHorizontalDeprecated", "attribute": "class", "value": "slds-form_horizontal", "description": "Deprecated horizontal-form wrapper class retained for legacy blueprints." }, { "name": "formStackedDeprecated", "attribute": "class", "value": "slds-form_stacked", "description": "Deprecated stacked-form wrapper class retained for legacy blueprints." } ] }, "states": [ { "name": "required", "type": "boolean", "aria": "aria-required", "description": "Whether the field is required." }, { "name": "hasError", "type": "boolean", "description": "Whether the field has a validation error. When true, the control sets aria-invalid and the help text becomes the error message referenced via aria-describedby." }, { "name": "readonly", "type": "boolean", "aria": "aria-readonly", "description": "Whether the field is in read-only display mode (renders staticContent instead of a control)." }, { "name": "disabled", "type": "boolean", "aria": "aria-disabled", "description": "Whether the form element is disabled." }, { "name": "editing", "type": "boolean", "description": "Whether the form element is in inline-edit mode (control replaces staticContent)." }, { "name": "open", "type": "boolean", "aria": "aria-expanded", "description": "Whether an attached overlay (datepicker, dropdown) is currently open. Adds the slds-is-open hook on the form element." }, { "name": "layout", "type": "enum", "options": [ "default", "compoundDeprecated" ], "description": "Layout flavor. `compoundDeprecated` renders the inner `group` wrapper used by legacy compound/address blueprints." } ], "accessibility": { "requirements": [ { "id": "label-association", "description": "Label must be associated with input via for/id, aria-labelledby, or a fieldset+legend wrapper." }, { "id": "error-association", "description": "When hasError is true, the control must set aria-invalid=\"true\" and aria-describedby pointing at the help/error element id." }, { "id": "required-indicator", "description": "Required indicator (asterisk) is decorative; mark with aria-hidden=\"true\" so screen readers rely on aria-required on the control instead." }, { "id": "help-icon-affordance", "description": "Help-icon button must have an accessible name (visually hidden label) and reference the popover via aria-describedby." } ] }, "componentRefs": { "PrimitiveIcon": { "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.", "props": { "iconName": { "type": "string", "required": true, "description": "Sprite reference for the icon glyph" } } } }, "extensions": { "com.salesforce-ux": { "dateAdded": "2015-09-04", "genReady": false, "lbc": "lightning-form-element" } }, "cssSource": "./form-element.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "required", "class": "slds-is-required" }, { "state": "hasError", "class": "slds-has-error" }, { "state": "readonly", "class": "slds-form-element_readonly" }, { "state": "editing", "class": "slds-is-editing" }, { "state": "open", "class": "slds-is-open" } ] }