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.
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.
Message |
ui:message |
A message notification of varying severity levels |
Menu |
ui:menu |
|
ui:menuList |
|
ui:actionMenuItem |
|
ui:checkboxMenuItem |
|
ui:radioMenuItem |
|
ui:menuItemSeparator |
|
ui:menuItem |
|
ui:menuTrigger |
|
ui:menuTriggerLink |
|
Input Control Components
The following components are interactive, for example, like buttons and checkboxes.
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.
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.
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 |