UI: TextField
A labelled text input with an optional description and error message. Import the token file once (@pithyx/ui/tokens.css) and wrap the app in UiProvider; see @pithyx/ui.
Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.
Interfaces
Section titled “Interfaces”TextFieldProps
Section titled “TextFieldProps”The props of TextField: React Aria’s text field props plus label, hints and an error.
Extends
Section titled “Extends”Omit<AriaTextFieldProps,"className"|"children">
Properties
Section titled “Properties”label: ReactNode;The visible label, also the accessible name.
description?
Section titled “description?”optional description?: ReactNode;A hint below the input, announced with it.
errorMessage?
Section titled “errorMessage?”optional errorMessage?: ReactNode;The text shown while the field is invalid (isInvalid or a failed validate).
placeholder?
Section titled “placeholder?”optional placeholder?: string;A hint inside the empty input; never a replacement for the label.
className?
Section titled “className?”optional className?: string;Extra class names for the field, added after its own.
inputClassName?
Section titled “inputClassName?”optional inputClassName?: string;Extra class names for the input element.
autoCapitalize?
Section titled “autoCapitalize?”optional autoCapitalize?: "none" | "characters";“none” for user names and codes, so phones do not capitalize the first letter.
trailing?
Section titled “trailing?”optional trailing?: ReactNode;Trailing content inside the input frame, for example a reveal button.
Functions
Section titled “Functions”TextField()
Section titled “TextField()”function TextField(props): Element;A labelled text input with an optional description and error message. Set autoComplete as the form needs it
(username, email), so password managers and browsers fill it in.
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
props |
TextFieldProps |
React Aria’s text field props (value, onChange, isRequired, validate) plus label, hints and error. |
Returns
Section titled “Returns”Element
The field with label, input, description and error.
Example
Section titled “Example”<TextField label="Name" value={name} onChange={setName} isRequired />