Input

With the input component, you can create a text input field with a few options. For simplicity, the input component does not include a label. If you need a label, you can check out the field component.

Attributes

type (string) - Per HTML5, the type of input. Default is text.
clearable (boolean) - If present, a clear button will be displayed.
revealable (boolean) - If present, a reveal button will be displayed.
icon (string) - The icon to display.
start-icon (string) - The icon to display at the start.
size (string) - The size of the input. Possible values are sm and lg.

Field Attributes

label (String): The label for the input.
description (String): A description of the input.
desc-end (String): A description that appears at the end of the input.

Basic Usage

Name

Enter your name

Copy to clipboard

<aura:input wire:model="name" label="Name" description="Enter your name" />

Description

There is either a description or desc-start attribute to add a description to the input.

Search for something

Copy to clipboard

<aura:input label="Search" description="Search for something" />
<aura:input label="Search" desc-start="Search for something" />

Password

Copy to clipboard

<aura:input type="password" value="password" />

Clearable

Copy to clipboard


<aura:input clearable value="Hello, World!" />

Revealable

Copy to clipboard

<aura:input type="password" revealable ... />

Input with Icon

Copy to clipboard

<aura:input icon="magnifying-glass" />
<aura:input icon-start="magnifying-glass" />
<aura:input icon="magnifying-glass" icon-start="tag" />

Input Sizes

Default size is md.

Copy to clipboard

<aura:input />
<aura:input lg />

Home