FluxTextField

A single-line text input. Use type to pick the semantic kind (email, password, number, …); use state to surface validation status. Always set accessibility.label — screen readers need it even when a visible placeholder exists.

Extends: TextField (a2ui/basic@0.10)

Category: primitive

Props

Name	Type	Required	Default
accessibility	object	yes	``
component	'FluxTextField'	yes	``
disabled	boolean	no	``
error	string	no	``
helper	string	no	``
id	string	yes	``
leadingIcon	string	no	``
maxLength	integer	no	``
placeholder	string	no	``
readonly	boolean	no	``
required	boolean	no	``
size	'sm' | 'md' | 'lg'	yes	'md'
state	'default' | 'error' | 'success' | 'warning'	yes	'default'
trailingIcon	string	no	``
type	'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'	yes	'text'
value	string	no	``

Examples

Basic email field with placeholder.

UI.text_field("email", type="email", placeholder="you@example.com")

Password field with helper text.

UI.text_field("password", type="password", helper="At least 12 characters.")

Numeric field surfacing a validation error.

UI.text_field("age", type="number", state="error", error="Must be 18+")

Anti-patterns

Avoid: accessibility.label is required — placeholders are not a11y labels.

UI.text_field("email")   # no accessibility.label

Avoid: type=password hides input; reserve it for actual credentials, not long IDs the user may need to paste.

UI.text_field("token", type="password")   # masking a non-secret

Tokens used

• $color.bg.surface

• $color.border.danger

• $color.border.default

• $color.success.solid

• $color.text.danger

• $color.text.primary

• $color.warning.7

• $radius.lg

• $radius.md

• $space.2

• $space.3

• $space.4

• $typography.size.lg

• $typography.size.md

• $typography.size.sm

Basic-catalog fallback

• Component: TextField

• Prop map: placeholder → placeholder, value → value

• Notes: Basic renderers drop size / state / helper / icons — only the raw input with a placeholder survives.