# Input

<flow-input>

Stable

The Input component accepts text input from the user.

The Input control provides a styled equivalent of the native <input> element and can be used to accept input in forms or standalone UI elements such as search bars.

# Examples

# Styles

The following styles are supported:

filled - The standard style for forms.
outlined - For standalone inputs such as search boxes.
plain - Minimal styling for compact forms.

TIP

Note that the plain style does not include a floating label. A field label should be provided to the left or above the input control.

# Colors

Set the color attribute to select a color for the Input control from the application palette.

# Disabled Input Controls

Add the disabled attribute to disable an Input control.

# Icons

An Input control can have a leading or trailing icon. Leading icons are display-only and should provide a hint to the purpose of the the input. Trailing icons act as buttons and provide a user action such as 'search'.

WARNING

The plain input type does not support icons.

# Prefix and Suffix Text

Set the prefix-text and/or suffix-text attributes to add prefix and suffix text to the Input control.

# Event Handling

The Input control supports three custom events:

flowInputAction - emitted when the trailing action icon is clicked.
flowChange - emitted when the Input control's value changes (equivalent to the native change event).
flowInput - emitted when the Input control receives input (equivalent to the native input event).

Other native input events such as keydown can also be intercepted.

Note that flowChange is emitted when either the enter key is pressed or the trailing action icon is clicked. It can therefore be used to trigger an action via the keyboard or a mouse click whenever the input value has changed.

TIP

Open the browser developer console to see event handler output.

# Properties

Property	Description	Type	Default
`color`	The color of the control. Colors are taken from the application palette.	`"danger" \| "gray" \| "primary" \| "secondary" \| "success" \| "warning"`
`disabled`	Set to `true` to disable interaction with the input control.	`boolean`	`false`
`icon`	An icon to place before the input. The property can be the name of a built-in icon, a URL of an SVG file, or an SVG data URI.	`string`
`label`	The label text.	`string`
`name`	The name attribute of the native input control	`string`
`prefixText` `prefix-text`	Prefix text to place before the input.	`string`
`suffixText` `suffix-text`	Suffix text to place after the input.	`string`
`trailingIcon` `trailing-icon`	An icon action button to place after the input. The property can be the name of a built-in icon, a URL of an SVG file, or an SVG data URI.	`string`
`type`	The style of the input control.	`"filled" \| "outlined" \| "plain"`	`'filled'`
`value`	The value of the input control.	`string`	`''`

# Events

Event	Description	Type
`flowChange`	Emitted when the control's value changes.	`any`
`flowInput`	Emitted when the control receives input.	`any`
`flowInputAction`	Emitted when trailing action icon is clicked.	`any`

# CSS Custom Properties

Name	Description
`--color`	Color of the input control decoration (border, label) (default: primary)

# CSS Parts

Name	Description
`icon`	The icon.
`input`	The native input control.
`label`	The floating label.
`prefix`	The input's prefix span.
`suffix`	The input's suffix span.
`trailing-icon`	The trailing icon button.

← Icon List →