Form Element - Lightning Design System

form-element

.slds-form-element, .slds-form — An HTML form element contains a HTML label and element

base

.slds-form-element — Creates layout for a form element

base › Base - Input

base › Base - Textarea

base › Base - Checkbox

base › Base - Checkbox Group

base › Base - Radio Group

base › Base - Inline Help

base › Base - Tooltip Help

.slds-form-element__control

.slds-form-element__control — Wrapper to any form display element

listbox

.slds-listbox — Listbox container

.slds-listbox_inline

.slds-listbox_inline — Inline listbox

.slds-listbox_horizontal

.slds-listbox_horizontal — Horizontal listbox

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-listbox__option

.slds-listbox__option — Choosable option within listbox

.slds-media__body > :first-child

.slds-media__body > :first-child — If the listbox option is empty and slds-truncate is not present this fix the height of the option

base

.slds-chat — Root container of a chat session

base › Base - Input

base › Base - Textarea

base › Base - Checkbox

base › Base - Checkbox Group

base › Base - Radio Group

base › Base - Inline Help

base › Base - Tooltip Help

.slds-chat-list

.slds-chat-list — Handles the display of chat items within a list

.slds-chat-listitem

.slds-chat-listitem — Handles spacing and direction of items in the list

.slds-chat-listitem_outbound

.slds-chat-listitem_outbound — Modifier used to style outbound message list items

inbound-message

.slds-chat-listitem_inbound — Modifier used to style inbound message list items

.slds-chat-listitem_bookend

.slds-chat-listitem_bookend — Modifier used for spacing bookend items

.slds-chat-listitem_event

.slds-chat-listitem_event — Modifier used for spacing event items

.slds-chat-message

.slds-chat-message — styles the outter part of a chat message

.slds-chat-message_faux-avatar

.slds-chat-message_faux-avatar — Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message

.slds-chat-avatar

.slds-chat-avatar — Used to style avatars in chat logs

.slds-chat-avatar__intials

.slds-chat-avatar__intials — Used to style the avatar intials for chat

.slds-chat-message__body

.slds-chat-message__body — Used to contain and align chat messages with their avatars

.slds-chat-message__image_loading

.slds-chat-message__image_loading — true

.slds-chat-message__text

.slds-chat-message__text — Used to style the chat text from agent or customer

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-message__text_inbound

.slds-chat-message__text_inbound — Used for any specific inbound text styling

.slds-chat-message__text_outbound

.slds-chat-message__text_outbound — Used for any specific outbound text styling

.slds-chat-message__text_outbound-agent

.slds-chat-message__text_outbound-agent — Used for any specific outbound (from another agent) text styling

unsupported

.slds-chat-message__text_unsupported-type — Used for an inbound message that is not a supported message type

delivery-failure

.slds-chat-message__text_delivery-failure — Used for an inbound message that fails to deliver

.slds-chat-message__text_delivery-failure-reason

.slds-chat-message__text_delivery-failure-reason — Element that contains feedback for why inbound message failed

.slds-chat-message__text_sneak-peek

.slds-chat-message__text_sneak-peek — Used when sneak peek is enabled for customer messages

.slds-chat-message__file

.slds-chat-message__file — true

.slds-chat-message__file_inbound

.slds-chat-message__file_inbound — Used for any specific inbound file styling

.slds-chat-message__meta

.slds-chat-message__meta — Used to style chat message meta data

.slds-chat-message__action

.slds-chat-message__action — Used to style chat message resend action

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-event

.slds-chat-event — During any chat, certain events can occur which need to be displayed to the user

.slds-chat-event__rule

.slds-chat-event__rule — Used to style the horizontal rules on an event

.slds-chat-event__body

.slds-chat-event__body — Used for styling the event body text

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-event__agent-message

.slds-chat-event__agent-message — Used to style any messages from an agent in the event

error

.slds-has-error — Modifier to indicate the event was an error

.slds-chat-bookend

.slds-chat-bookend — Used to style a chat bookend

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

stop

.slds-chat-bookend_stop — Modifier for bookends which stop a chat session

past

.slds-chat_past — Apply when displaying chat logs that appeared in the past

.slds-chat-message__text_delivery-failure-reason

.slds-chat-message__text_delivery-failure-reason — Element that contains feedback for why inbound message failed

error

.slds-has-error — Modifier to indicate the event was an error

.slds-listbox_selection-group

.slds-listbox_selection-group — The container of pill selections found inside of a combobox group

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-is-expanded

.slds-is-expanded — Expanded state of a selection group

.slds-listbox-toggle

.slds-listbox-toggle — Toggle button to show all of the pill selections

base

.slds-dynamic-menu

base › Base - Input

base › Base - Textarea

base › Base - Checkbox

base › Base - Checkbox Group

base › Base - Radio Group

base › Base - Inline Help

base › Base - Tooltip Help

.slds-dynamic-menu__header

.slds-dynamic-menu__header — Headers styles for dynamic menu

.slds-global-header__item_search

.slds-global-header__item_search — Region that contains the search input, handles sizing

.slds-global-search__form-element div

.slds-global-search__form-element div — Primary combobox that contains the search input, handles sizing

.slds-listbox_selection-group

.slds-listbox_selection-group — The container of pill selections found inside of a combobox group

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-is-expanded

.slds-is-expanded — Expanded state of a selection group

.slds-listbox-toggle

.slds-listbox-toggle — Toggle button to show all of the pill selections

.slds-backdrop

.slds-backdrop — Creates the shaded backdrop used behind the modal.

.slds-backdrop_open

.slds-backdrop_open — Allows the backdrop to be visible.

.slds-is-active

.slds-is-active — Active state of an item

.slds-backdrop

.slds-backdrop — Creates the shaded backdrop used behind the modal.

.slds-backdrop_open

.slds-backdrop_open — Allows the backdrop to be visible.

base

.slds-popover — A dialog popover, `.slds-popover`, can be applied to all variants of a dialog popover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied. A dialog popover requires at least one focusable element.

base › Base - Input

base › Base - Textarea

base › Base - Checkbox

base › Base - Checkbox Group

base › Base - Radio Group

base › Base - Inline Help

base › Base - Tooltip Help

.slds-popover_edit

.slds-popover_edit — Dialog specific for inline-edit popover

.slds-form-element__label_edit

.slds-popover__meta

.slds-popover__meta — Applies styles for meta content of popover

.slds-popover__body

.slds-popover__body — Applies styles for primary content area of popover

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-popover__body_small

.slds-popover__body_small — Applies a max-height and vertical scrolling to a popover body

.slds-popover__header

.slds-popover__header — Applies styles for top area of popover

.slds-popover__footer

.slds-popover__footer — Applies styles for footer area of popover

.slds-popover__footer_form

.slds-popover__footer_form — Applies styles to center align content for footer area of a form popover

.slds-popover__close

.slds-popover__close — Close button within a popover

.slds-popover_small

.slds-popover_small — Width modifier for popover - small

.slds-popover_medium

.slds-popover_medium — Width modifier for popover - medium

.slds-popover_large

.slds-popover_large — Width modifier for popover - large

.slds-popover_full-width

.slds-popover_full-width — Modifier for popover to take 100% width

.slds-popover_hide

.slds-popover_hide — Modifier to hide a popover

.slds-popover_dark

.slds-popover_dark — Applies styles for dark variant of popover

brand

.slds-popover_brand — Initializes a brand popover

.slds-popover_brand-top

.slds-popover_brand-top — Applies popover brand styles to top

.slds-popover_brand-left

.slds-popover_brand-left — Applies popover brand styles to left

.slds-popover_brand-bottom

.slds-popover_brand-bottom — Applies popover brand styles to bottom

.slds-popover_brand-right

.slds-popover_brand-right — Applies popover brand styles to right

error

.slds-popover_error — Initializes an error non-modal dialog

.slds-popover__body_scrollable

.slds-popover__body_scrollable — Applies scrollable styles for popovers

feature

.slds-popover_feature — Initializes a feature non-modal dialog

.slds-nubbin_top

.slds-nubbin_top-left

.slds-nubbin_top-right

.slds-nubbin_bottom

.slds-nubbin_bottom-left

.slds-nubbin_bottom-right

.slds-nubbin_left

.slds-nubbin_left-top

.slds-nubbin_left-bottom

.slds-nubbin_right

.slds-nubbin_right-top

.slds-nubbin_right-bottom

.slds-nubbin_top-left-corner

.slds-nubbin_bottom-left-corner

.slds-nubbin_top-right-corner

.slds-nubbin_bottom-right-corner

.slds-nubbin_left-top-corner

.slds-nubbin_right-top-corner

.slds-nubbin_left-bottom-corner

.slds-nubbin_right-bottom-corner

panels

.slds-popover_panel

Label for panels

.slds-popover_panel__label

prompt

.slds-popover_prompt — Initializes a prompt non-modal dialog

.slds-popover_prompt__heading

.slds-popover_prompt__heading — Applies styles for heading text of prompt

.slds-popover_prompt__action-link

.slds-popover_prompt__action-link — Applies styles for the optional action link in the footer of prompt

.slds-popover_prompt_top-left

.slds-popover_prompt_top-left — Position Prompt top left

.slds-popover_prompt_top

.slds-popover_prompt_top — Position Prompt top center

.slds-popover_prompt_top-right

.slds-popover_prompt_top-right — Position Prompt top right

.slds-popover_prompt_bottom-left

.slds-popover_prompt_bottom-left — Position Prompt bottom left

.slds-popover_prompt_bottom

.slds-popover_prompt_bottom — Position Prompt bottom center

.slds-popover_prompt_bottom-right

.slds-popover_prompt_bottom-right — Position Prompt bottom right

walkthrough

.slds-popover_walkthrough — Initializes a walkthrough non-modal dialog

.slds-popover_walkthrough-alt

.slds-popover_walkthrough-alt — Alternate background for walkthrough non-modal dialog

warning

.slds-popover_warning — Initializes an warning non-modal dialog

.slds-popover__body_scrollable

.slds-popover__body_scrollable — Applies scrollable styles for popovers

einstein

.slds-popover_einstein — Initializes a Einstein non-modal dialog

base

.slds-modal_prompt — Initializes Prompt style notification

base › Base - Input

base › Base - Textarea

base › Base - Checkbox

base › Base - Checkbox Group

base › Base - Radio Group

base › Base - Inline Help

base › Base - Tooltip Help

base

.slds-popover_tooltip — Initializes a tooltip

base › Base - Input

base › Base - Textarea

base › Base - Checkbox

base › Base - Checkbox Group

base › Base - Radio Group

base › Base - Inline Help

base › Base - Tooltip Help

rise

.slds-rise-from-ground — Toggles on tooltip

fall

.slds-fall-into-ground — Toggles off tooltip

bottom-to-top

.slds-slide-from-bottom-to-top — Slides tooltip from bottom to top

top-to-bottom

.slds-slide-from-top-to-bottom — Slides tooltip from top to bottom

right-to-left

.slds-slide-from-right-to-left — Slides tooltip from right to left

left-to-right

.slds-slide-from-left-to-right — Slides tooltip from left to right

.slds-truncate

.slds-truncate — Creates truncated text

.slds-listbox__option-header

.slds-listbox__option-header — Header for choosable option within listbox

.slds-listbox__option-icon

.slds-listbox__option-icon — Container for listbox option icon

.slds-has-focus

.slds-has-focus — Focus state of a vertical listbox option

.slds-listbox__option_entity

.slds-listbox__option_entity — Modifies the listbox option if it contains an entity object

.slds-listbox__option_plain

.slds-listbox__option_plain — Modifies the listbox option if it contains an plain object or string

.slds-listbox__option_has-meta

.slds-listbox__option_has-meta — If the listbox option has metadata or secondary information that sits below its primary text

.slds-is-selected

.slds-is-selected — Modifier that makes selected icon visible

.slds-listbox__option-text_entity

.slds-listbox__option-text_entity — The main text of an entity listbox

.slds-listbox__option-meta

.slds-listbox__option-meta — The metadata or secondary text of an entity listbox

.slds-listbox__icon-selected

.slds-listbox__icon-selected — The icon within a plain listbox that indicates if an option has been selected or not.

.slds-listbox_vertical

.slds-listbox_vertical — Creates a vertical listbox

.slds-dropdown_length-5

.slds-dropdown_length-5 — Forces overflow scrolling after 5 list items

.slds-dropdown_length-7

.slds-dropdown_length-7 — Forces overflow scrolling after 7 list items

.slds-dropdown_length-10

.slds-dropdown_length-10 — Forces overflow scrolling after 10 list items

.slds-dropdown_length-with-icon-5

.slds-dropdown_length-with-icon-5 — Forces overflow scrolling after 5 list items with an icon

.slds-dropdown_length-with-icon-7

.slds-dropdown_length-with-icon-7 — Forces overflow scrolling after 7 list items with an icon

.slds-dropdown_length-with-icon-10

.slds-dropdown_length-with-icon-10 — Forces overflow scrolling after 10 list items with an icon

.slds-form-element__icon

.slds-form-element__icon — When an icon sits within a form element wrapper and adjacent to another element inside that wrapper such as a .form-element__label

.slds-form-element__help

.slds-form-element__help — Creates inline help styles, sits below .form-element__control

.slds-form-element_edit

.slds-form-element_edit — Modifier on slds-form-element that it needs to reserve space for the inline-edit trigger button

.slds-form-element_readonly

.slds-form-element_readonly — When a form element is in view mode, we modify some styling

.slds-form-element__legend

.slds-form-element__legend — The form element label when applied to a legend element

.slds-form-element__legend_has-tooltip

.slds-form-element__legend_has-tooltip — Aligns the legend properly when there is an info tooltip

.slds-form-element__addon

.slds-form-element__addon — Fixed text that sits to the left or right of an input

.slds-form-element__static

.slds-form-element__static — Initializes read-only form element

.slds-form-element__static_edit

.slds-form-element__static_edit — Inline Edit on static form element

.slds-required

.slds-required — Required asterisk

.slds-has-error

.slds-has-error — Error styles for form element

compound

.slds-form-element_compound — Creates a form that consists of multiple form groups

compound › Deprecated - Compound form element

compound › Compound - Form Layout

address

.slds-form-element_address — Creates a form that consists of multiple form groups specific to an address form

horizontal

.slds-form-element_horizontal — Horizontal form elements with label left-aligned to the control

horizontal › Horizontal - 1 column - Read Only Mode

horizontal › Horizontal - View Mode (Deprecated)

horizontal › Horizontal - Edit Mode (Deprecated)

horizontal › Horizontal - Simple form layout

horizontal › Horizontal - View Mode

.slds-form-element__undo

.slds-form-element__undo — Container for the undo button icon found inside of slds-form-element

stacked

.slds-form-element_stacked — Vertical form elements with label stacked on top of control

stacked › Stacked - 1 column Read Only

stacked › Stacked - 1 column - In narrow container

stacked › Stacked - View Mode (Deprecated)

stacked › Deprecated - Stacked form layout - Edit Mode

stacked › Stacked - Simple form layout

stacked › Stacked - View Mode

.slds-input-has-icon

.slds-input-has-icon — Modifier if text input has svg icon adjacent to input

.slds-input__icon

.slds-input__icon — Hook for .slds-input-has-icon

.slds-input__icon_left

.slds-input__icon_left — Hook for .slds-input-has-icon--left-right

.slds-input__icon_right

.slds-input__icon_right — Hook for .slds-input-has-icon_left-right

.slds-input-has-icon_left

.slds-input-has-icon_left — Positions .slds-input__icon to the left of the text input

.slds-input-has-icon_right

.slds-input-has-icon_right — Positions .slds-input__icon to the right of the text input

.slds-input-has-icon_left-right

.slds-input-has-icon_left-right — Positions .slds-input__icon_left to the left of the text input and .slds-input__icon_right to the right of the text input

.slds-input-has-icon_group-right

.slds-input__icon-group

.slds-input__icon-group — Positions two items (icons and/or spinners) on one side or the other of the input

.slds-input__icon-group_right

.slds-input__icon-group_right — Positions the close icon and spinner on the right side of the input while searching

.slds-input-has-fixed-addon

.slds-input-has-fixed-addon — Use on input container to let it know there is fixed text to the left or right of the input

.slds-slider-label

.slds-slider-label — Contains the label and range for the slider label - not required

.slds-slider-label__label

.slds-slider-label__label — Contains the label for the slider and adds a hook for adding `.slds-assistive-text` class to visually hide the label, but not the range

.slds-slider-label__range

.slds-slider-label__range — Contains the range for the slider

record-detail

.slds-form — Creates layout for a form

record-detail › Stacked form layout - 1 column - Read Only Mode

record-detail › Stacked form layout - 1 column - In narrow container

record-detail › Stacked form layout - Edit Mode

record-detail › Horizontal form layout - View Mode

record-detail › Horizontal form layout - 1 column - Read Only Mode

.slds-form__row

.slds-form__row — Each row inside of a record form

.slds-form__item

.slds-form__item — Each item inside of a record form row

.slds-is-edited

.slds-is-edited — Indicates if a form element has been edited, but unsaved

.slds-form_horizontal

.slds-form_horizontal — Horizontal form elements with label left-aligned to the control

.slds-form_stacked

.slds-form_stacked — Vertical form elements with label stacked on top of control