Text Input

Collects single-line text with Noora labels, hints, prefixes, and suffixes.

TextInput web component

Collects single-line text with Noora labels, hints, prefixes, and suffixes.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Input types

Use basic, email, card-number, search, and password presentations.

<noora-text-input name="basic" placeholder="Placeholder text..."><noora-icon slot="prefix" name="user"></noora-icon></noora-text-input>
<noora-text-input type="email" name="email" placeholder="hello@tuist.dev"></noora-text-input>
<noora-text-input type="card_number" name="card" placeholder="0000 0000 0000 0000"></noora-text-input>
<noora-text-input type="search" name="search" placeholder="Search..."></noora-text-input>
<noora-text-input type="password" name="password"></noora-text-input>

With hint

Give supporting guidance below the input.

<noora-text-input name="username" placeholder="Username" hint="Use letters, numbers, and underscores"></noora-text-input>

Error

Communicate validation failures.

<noora-text-input name="email" placeholder="hello@tuist.dev" error="Enter a valid email address"></noora-text-input>

Custom suffix

Provide a custom element after the native input.

<noora-text-input name="assignee" placeholder="Assignee"><noora-icon slot="suffix" name="user"></noora-icon></noora-text-input>

Labels

Show required and secondary label content.

<noora-text-input type="email" name="email" label="Email" required show-required></noora-text-input>
<noora-text-input type="password" name="password" label="Password" sublabel="Be safe!"></noora-text-input>

Disabled

Compare empty and filled disabled fields.

<noora-text-input type="email" name="empty-email" label="Email" placeholder="hello@tuist.dev" hint="Use a tuist.dev address" disabled></noora-text-input>
<noora-text-input type="email" name="filled-email" value="hello@tuist.dev" hint="Use a tuist.dev address" disabled></noora-text-input>

Attributes

Attribute	Type or allowed values	Default	Description
`type`	basic, email, card_number, search, password	`"basic"`	Controls the semantic field presentation.
`input-type`	string	`"text"`	Sets the native input type for basic fields.
`label`	string	`None`	Sets the field label.
`sublabel`	string	`None`	Sets secondary label text.
`hint`	string	`None`	Sets supporting text.
`hint-variant`	default, destructive, disabled	`"default"`	Controls hint semantics.
`error`	string	`None`	Sets the validation error.
`name`	string	`""`	Sets the submitted field name.
`value`	string	`""`	Gets or sets the field value.
`placeholder`	string	`None`	Sets placeholder text.
`required`	boolean	`false`	Marks the field as required.
`show-required`	boolean	`false`	Shows the required indicator.
`min`	string	`None`	Sets the native minimum value.
`max`	string	`None`	Sets the native maximum value.
`step`	string	`None`	Sets the native step value.
`disabled`	boolean	`false`	Disables the field.

Events

Event	Type	Description
`input`	`InputEvent`	Emitted while the input value changes.
`change`	`Event`	Emitted after the input value is committed.

Slots

Name	Description
`prefix`	A custom prefix for basic fields.
`suffix`	A custom suffix.

Styling parts

Name	Description
`input`	The native input.
`wrapper`	The input wrapper.

Behavior

The component emits standard input and change events.