Working with UI Components

Components in the ui namespace are deprecated as of API version 47.0. We recommend you use components in the lightning namespace instead. You can continue to use these components beyond Summer ’21 but Salesforce plans to cease support for these ui components in Summer ’21.

Note

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.

The following tables list out ui components and their recommended counterparts in the lightning namespace.

Complex, Interactive Components

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

Type	ui Component (Deprecated)	Description	lightning Component
Message	`ui:message`	A message notification of varying severity levels	`lightning:notificationsLibrary`
Menu	`ui:menu`	A drop-down list with a trigger that controls its visibility	`lightning:buttonMenu`
	`ui:menuList`	A list of menu items	`lightning:buttonMenu`
	`ui:actionMenuItem`	A menu item that triggers an action	`lightning:menuItem`
	`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	`lightning:menuDivider`
	`ui:menuItem`	An abstract and extensible component for menu items in a `ui:menuList` component	`lightning:menuItem`
	`ui:menuTrigger`	A trigger that expands and collapses a menu	`lightning:buttonMenu`
	`ui:menuTriggerLink`	A link that triggers a dropdown menu. This component extends `ui:menuTrigger`	`lightning:buttonMenu`

Input Control Components

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

Type	Key Components (Deprecated)	Description	lightning Component
Button	`ui:button`	An actionable button that can be pressed or clicked	`lightning:button`
Checkbox	`ui:inputCheckbox`	A selectable option that supports multiple selections	`lightning:input` with `checkbox`, `toggle`, or `checkbox-button` type
Checkbox	`ui:outputCheckbox`	Displays a read-only value of the checkbox	`lightning:input` with `checkbox` type and `readonly` attribute
Radio button	`ui:inputRadio`	A selectable option that supports only a single selection	`lightning:input` with `radio` type or `lightning:radioGroup`
Drop-down List	`ui:inputSelect`	A drop-down list with options	`lightning:combobox`
	`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 (Deprecated)	Description	lightning Component
Field-level error	`ui:inputDefaultError`	An error message that is displayed when an error occurs	`lightning:input` with field validation
Spinner	`ui:spinner`	A loading spinner	`lightning:spinner`

Field Components

The following components enables you to enter or display values.

Type	Key Components (Deprecated)	Description	lightning Component
Currency	`ui:inputCurrency`	An input field for entering currency	`lightning:input` with `number` type and `currency` formatter
Currency	`ui:outputCurrency`	Displays currency in a default or specified format	`lightning:formattedNumber` with `currency` style
Email	`ui:inputEmail`	An input field for entering an email address	`lightning:input` with `email` type
Email	`ui:outputEmail`	Displays a clickable email address	`lightning:formattedEmail`
Date and time	`ui:inputDate`	An input field for entering a date	`lightning:input` with `date` type
	`ui:inputDateTime`	An input field for entering a date and time	`lightning:input` with `datetime` type
	`ui:outputDate`	Displays a date in the default or specified format	`lightning:formattedDateTime`
	`ui:outputDateTime`	Displays a date and time in the default or specified format	`lightning:formattedDateTime` or `lightning:formattedTime`
Password	`ui:inputSecret`	An input field for entering secret text	`lightning:input` with `password` type
Phone Number	`ui:inputPhone`	An input field for entering a telephone number	`lightning:input` with `phone` type
Phone Number	`ui:outputPhone`	Displays a phone number	`lightning:formattedPhone`
Number	`ui:inputNumber`	An input field for entering a numerical value	`lightning:input` with `number` type
Number	`ui:outputNumber`	Displays a number	`lightning:formattedNumber`
Range	`ui:inputRange`	An input field for entering a value within a range	`lightning:slider`
Rich Text	`ui:inputRichText`	An input field for entering rich text	`lightning:inputRichText`
Rich Text	`ui:outputRichText`	Displays rich text	`lightning:formattedRichText`
Text	`ui:inputText`	An input field for entering a single line of text	`lightning:input`
Text	`ui:outputText`	Displays text	`lightning:formattedText`
Text Area	`ui:inputTextArea`	An input field for entering multiple lines of text	`lightning:textarea`
Text Area	`ui:outputTextArea`	Displays a read-only text area	`lightning:formattedText`
URL	`ui:inputURL`	An input field for entering a URL	`lightning:input` with `url` type
URL	`ui:outputURL`	Displays a clickable URL	`lightning:formattedUrl`

Lightning Aura Components Developer Guide

Working with UI Components

Complex, Interactive Components

Input Control Components

Visual Components

Field Components

See Also