Forms

SearchField and PasswordField

A search box with a clear button, and a password field with show and hide.

Ant Design: Input.Search, Input.Password

import { SearchField, PasswordField } from '@alea/ui';

Examples

A clear button appears with text; Escape clears too.

Type to search

Show and hide the value. Use new-password on sign-up forms.

Password

New password

At least 12 characters.

Show 23 React Aria props

A search box with a clear button; Escape clears it too.

Prop	Type	Default	Description
`description`	`ReactNode`	-	Help text under the field.
`errorMessage`	`ReactNode \| ((v: ValidationResult) => ReactNode)`	-	Error text, or a function of the validation result. Shown when invalid.
`label`	`ReactNode`	-	The visible label. Use aria-label instead only when the context makes it obvious.
`placeholder`	`string`	`'Search'`	Placeholder text. Default "Search".
`showOptional`	`boolean`	-	Shows "(optional)" after the label.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	sm 32 px, md 44 px (default), lg 48 px.

Show 20 React Aria props

A password input with a show/hide button.

Prop	Type	Default	Description
`description`	`ReactNode`	-	Help text under the field.
`errorMessage`	`ReactNode \| ((v: ValidationResult) => ReactNode)`	-	Error text, or a function of the validation result. Shown when invalid.
`label`	`ReactNode`	`'Password'`	The visible label. Use aria-label instead only when the context makes it obvious.
`placeholder`	`string`	-	An example of what to type; never a replacement for the label.
`prefix`	`ReactNode`	-	Icon or text inside the field, before the value.
`showOptional`	`boolean`	-	Shows "(optional)" after the label.
`size`	`"sm" \| "md" \| "lg"`	-	sm 32 px, md 44 px (default), lg 48 px.

Key	Does
`Escape`	Clears the search
`Enter`	Submits the search (onSubmit)

Don't