Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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.

For all the components available, see the component reference at https://<mySalesforceInstance>.lightning.force.com/auradocs/reference.app, where <mySalesforceInstance> is the name of the instance hosting your org; for example, na1.

Component hierarchy for UI components
For tutorials on how to implement the components, refer to the following resources.

Input Control Components

These are the input control components you can use in your app.

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
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
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

These are visual components you can use.

Type Key Components Description
Field-level error ui:inputDefaultError An error message that is displayed when an error occurs
Message ui:message A message notification of varying severity levels
Spinner ui:spinner A loading spinner

Field Components

These are the common input and output components you can use.

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 clickable phone number
Number ui:inputNumber An input field for entering a numerical value
ui:outputNumber Displays a number
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