Input
A single-line text input.
1use herogpui::components::input::{Input, InputState};Usage
1use herogpui::prelude::{FieldVariant, Input, InputState};
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6 .flex()
7 .flex_col()
8 .w(px(256.))
9 .gap(px(12.))
10 .children(vec![
11 Input::new(self.demo_text("in-variant-primary", "", cx))
12 .label(FieldVariant::Primary.label())
13 .placeholder("Primary input")
14 .variant(FieldVariant::Primary)
15 .into_any_element(),
16 Input::new(self.demo_text("in-variant-secondary", "", cx))
17 .label(FieldVariant::Secondary.label())
18 .placeholder("Secondary input")
19 .variant(FieldVariant::Secondary)
20 .into_any_element(),
21 ])Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
Input
Input is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Input uses.
Styling
| Style | Description |
|---|---|
text_size + line_height | Text adornments inherit the field's 14px text and 20px line height. |
text_size(14px) + line_height(20px) + MEDIUM | Wrapper labels use 14px medium text with 20px lines, independent of host leading. |
text_size(12px) + line_height(16px) + validity-first branch | Helper and error text use 12px text with 16px lines; the error replaces the description. |
FIELD_HEIGHT + px(px(12.)) + FIELD_TEXT + field_radius + apply_field_chrome | Desktop field height, 12px inline inset, 14px desktop type, field radius, colours and shadow match. |
apply_field_chrome | Theme field border width and colour chain. |
direct apply_field_chrome state colours | State colours switch directly; GPUI has no property-transition implementation for these three values. |
opacity(disabled_opacity) | Theme-owned disabled opacity. |
FieldVariant::Secondary in apply_field_chrome | Lower-emphasis surface treatment. |
full_width() | Full-width modifier. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
input_type( | InputType | InputType:: | Text, password, email, number, telephone, URL and search modes are represented; browser-only input types and native email/URL validation are not. |
value( | text, | — | Writes the caller-provided controlled value into the owned InputState. |
default_value( | text | — | Seeds the uncontrolled InputState once. |
on_change( | Fn( | — | Reports the current text after accepted edits; rejected maxLength/type edits do not emit duplicate changes. |
placeholder( | text | — | Placeholder shown while empty and unfocused. |
is_disabled( | bool | false | Removes focus and editing and applies disabled opacity. |
is_read_only( | bool | false | Keeps focus and selection while suppressing edits. |
is_required( | bool | false | Participates in the HeroGPUI form validity registry. |
name( | text | — | Submission name stored with the current field value. |
max_length( | usize | — | Rejects edits that would exceed the character limit without reporting an unchanged value. |
min_length( | usize | — | Marks a non-empty value invalid below the character minimum. |
pattern( | predicate | — | A caller predicate replaces the browser regex-string attribute. |
min( | f64 | — | Numeric f64 lower bounds are supported; date/string native input bounds are not. |
max( | f64 | — | Numeric f64 upper bounds are supported; date/string native input bounds are not. |
step( | f64 | — | Numeric f64 step validity is supported; the native string forms are not. |
full_width( | bool | false | Stretches to the available container width. |
variant( | FieldVariant | FieldVariant:: | Primary field chrome or the lower-emphasis surface variant. |
Parts
| Part | Description |
|---|---|
Input | Single-line editable field with InputState-backed value, caret, selection and validation. |
States
| Builder | State | Description |
|---|---|---|
apply_field_chrome hover | Hover | Changes field background and border while unfocused. |
track_focus + apply_field_chrome | Focused | Draws focused field background, border and ring. Registers platform text replacement, composition and paste against the same editable state. |
focused field treatment | Focus visible | Pinned CSS adds no rule beyond the focused field treatment. |
is_invalid / validity + apply_field_chrome | Invalid | Uses invalid field ring and focused background. |
is_disabled(bool) | Disabled | Applies theme disabled opacity and removes editing/focus. |
is_read_only(bool) | Read only | Retains focus and selection while ignoring mutations. |