Working with UI Components

The framework provides common user interface components in the ui namespace. All of these components extend either aura:component or a child component of aura:component. aura:component is an abstract component that provides a default rendering implementation. User interface components such as ui:input and ui:output provide easy handling of common user interface events like keyboard and mouse interactions. Each component can be styled and extended accordingly.

Note

Note

If you are looking for components that apply the Lightning Design System styling, consider using the base lightning components instead.

For all the components available, see the component reference at https://<myDomain>.lightning.force.com/auradocs/reference.app, where <myDomain> is the name of your custom Salesforce domain.

Complex, Interactive Components

The following components contain one or more sub-components and are interactive.

Type Key Components Description
Message ui:message A message notification of varying severity levels
Menu ui:menu A drop-down list with a trigger that controls its visibility
ui:menuList A list of menu items
ui:actionMenuItem A menu item that triggers an action
ui:checkboxMenuItem A menu item that supports multiple selection and can be used to trigger an action
ui:radioMenuItem A menu item that supports single selection and can be used to trigger an action
ui:menuItemSeparator A visual separator for menu items
ui:menuItem An abstract and extensible component for menu items in a ui:menuList component
ui:menuTrigger A trigger that expands and collapses a menu
ui:menuTriggerLink A link that triggers a dropdown menu. This component extends ui:menuTrigger

Input Control Components

The following components are interactive, for example, like buttons and checkboxes.

Type Key Components Description
Button ui:button An actionable button that can be pressed or clicked
Checkbox ui:inputCheckbox A selectable option that supports multiple selections
ui:outputCheckbox Displays a read-only value of the checkbox
Radio button ui:inputRadio A selectable option that supports only a single selection
Drop-down List ui:inputSelect A drop-down list with options
ui:inputSelectOption An option in a ui:inputSelect component

Visual Components

The following components provides informative cues, for example, like error messages and loading spinners.

Type Key Components Description
Field-level error ui:inputDefaultError An error message that is displayed when an error occurs
Spinner ui:spinner A loading spinner

Field Components

The following components enables you to enter or display values.

Type Key Components Description
Currency ui:inputCurrency An input field for entering currency
ui:outputCurrency Displays currency in a default or specified format
Email ui:inputEmail An input field for entering an email address
ui:outputEmail Displays a clickable email address
Date and time ui:inputDate An input field for entering a date
ui:inputDateTime An input field for entering a date and time
ui:outputDate Displays a date in the default or specified format
ui:outputDateTime Displays a date and time in the default or specified format
Password ui:inputSecret An input field for entering secret text
Phone Number ui:inputPhone An input field for entering a telephone number
ui:outputPhone Displays a phone number
Number ui:inputNumber An input field for entering a numerical value
ui:outputNumber Displays a number
Range ui:inputRange An input field for entering a value within a range
Rich Text ui:inputRichText An input field for entering rich text
ui:outputRichText Displays rich text
Text ui:inputText An input field for entering a single line of text
ui:outputText Displays text
Text Area ui:inputTextArea An input field for entering multiple lines of text
ui:outputTextArea Displays a read-only text area
URL ui:inputURL An input field for entering a URL
ui:outputURL Displays a clickable URL