Text Field — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::TextField;
2
3TextField::new(self.text_field_state.clone())
4    .label("Full name")
5    .placeholder("Ada Lovelace")
6    .description("As it appears on your ID.")

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

TextFieldInput

Text Field is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Text Field uses.

Styling

Text Field styling
Style	Description
`Input wrapper flex_col + gap(4px)`	Root field stack uses the four-pixel gap.
`validity-first description branch`	The validation message replaces helper text instead of stacking with it.
`12px helper text without px-1`	Helper and error text use pinned typography and colour; does not add horizontal inset.

API reference

Builders

Text Field builders
Builder	Type	Default	Description
`content(render)`	`AnyElement \| Fn(values: TextFieldRenderProps) -> AnyElement`	—	Replacement content receives disabled, invalid, read-only, required and complete focus state.
`full_width()`	`bool`	`false`	Stretches the root and inner control to the available width.
`new(state)`	`state`	—	The caller-owned InputState entity supplies stable GPUI identity instead of a element id.
`is_required(bool)`	`bool`	`false`	Marks the field required for native form validation.
`is_invalid(bool)`	`bool`	—	Forces invalid field chrome and error state.
`validate(callback)`	`Fn(value: string) -> ValidationError \| true \| null`	—	A callback returns one optional validation message.
`validation_behavior(ValidationBehavior)`	`ValidationBehavior`	`ValidationBehavior::Native`	Selects blocking native validation or non-blocking ARIA-style validation.
`validation_errors(errors)`	`errors`	—	Server messages take precedence over custom validation.
`default_value(text)`	`text`	—	Seeds the uncontrolled InputState once.
`on_change(callback)`	`Fn(value: string) -> ()`	—	Reports each accepted edit without duplicate reports for rejected edits.
`is_disabled(bool)`	`bool`	`false`	Removes focus and editing and applies disabled opacity.
`is_read_only(bool)`	`bool`	`false`	Keeps focus and selection while suppressing edits.
`name(text)`	`text`	—	Submission name stored with the current field value.
`auto_focus(bool)`	`bool`	`false`	Focuses the inner input on its first render.

Parts

Text Field parts
Part	Description
`TextField`	Root field state and vertical composition.
`TextField`	Optional label rendered before the editable control.
`Input`	Single-line InputState-backed editable control.
`TextField`	Multi-line field composition is supplied by the sibling TextArea component.
`TextField`	Helper message shown while the field is valid.
`TextField`	Validation or server message replacing the description while invalid.

States

Text Field states
Builder	State	Description
`resolved Input validity`	`Invalid`	Hides the description and shows the field error.
`is_disabled(bool)`	`Disabled`	Applies disabled opacity and removes focus and editing.
`TextFieldRenderState::is_focus_within`	`Focus within`	Replacement content receives focus-within while the inner input owns focus.
`TextFieldRenderState::is_focus_visible`	`Focus visible`	Replacement content receives keyboard-visible focus state.

Checkbox Checkbox Group Fieldset Label & Messages Form Input Input Group Input OTP Number Field Radio Group Search Field Text Area