Number Field — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::{NumberField, NumberState};
2
3NumberField::new(self.demo_number(
4    "nf-usage",
5    1024.,
6    0.,
7    4096.,
8    1.,
9    cx,
10))
11// v3's basic example seeds the field with `defaultValue`.
12.default_value(1024.)
13.min_value(0.)
14.name("width")
15.full_width(true)
16.label("Width")

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

Anatomy

Rust types

NumberField

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

Customization

Appearance builders and theme tokens Number Field uses.

Styling

Number Field styling
Style	Description
`flex_col + gap(px(4.))`	Root field stack and four-pixel label/message spacing.
`FIELD_HEIGHT + 40px buttons + apply_field_chrome`	The default flex anatomy matches the three column geometry and shared field shell, with explicit 14px/20px group text; GPUI has no CSS grid or autofill pseudo-state.
`apply_field_chrome`	State colors and focus shadow swap on a frame rather than interpolating.
`Input::in_group + FIELD_TEXT`	Inset, transparent grouped chrome and desktop text size match; GPUI text does not expose tabular numeral selection.
`stepper_btn 40x36 + FIELD_ICON`	Default cell and icon metrics match with a 15% placeholder seam.
`stepper hover/press colors`	Button color changes are immediate.
`pressed_with_background(PRESSED_SCALE) + repeat task`	Fill, geometric scale and hold behavior match; arbitrary icon children keep their fixed dimensions and the transform ramp is immediate.
`FieldVariant::Secondary + apply_field_chrome`	Lower-emphasis field tokens are selected through FieldVariant.
`full_width(true) + w_full`	Root and group both fill the available width.
`vertical_steppers(true) + 24x18 cells`	The documented custom-class composition is available as a typed layout seam while preserving spin behavior.

API reference

Builders

Number Field builders
Builder	Type	Default	Description
`content(render)`	`AnyElement \| Fn(values: NumberFieldRenderProps) -> AnyElement`	—	Built-in field anatomy or replacement content receiving the complete resolved number-field state.
`full_width(bool)`	`bool`	`false`	Expands both the root and number group to the available width.
`new(state)`	`state`	—	The bound NumberState entity supplies stable GPUI identity rather than a element id.
`variant(FieldVariant)`	`FieldVariant`	`FieldVariant::Primary`	Selects elevated or lower-emphasis field chrome.
`default_value(value)`	`number`	—	Seeds the uncontrolled NumberState once before render content observes it.
`on_change(callback)`	`Fn(value: number \| undefined) -> ()`	—	Reports each changed numeric value; the local state cannot represent undefined empty value.
`format_options(NumberFormat)`	`NumberFormat`	—	Supports decimal, currency and percentage formatting without the complete Intl option surface.
`is_required(bool)`	`bool`	`false`	Marks the label and live FormField required and blocks invalid native submission.
`is_invalid(bool)`	`bool`	`false`	Forces invalid chrome and validation reporting.
`validate(callback)`	`Fn(value: number) -> ValidationError \| true \| null \| undefined`	—	Custom validation returns one optional GPUI message.
`validation_behavior(ValidationBehavior)`	`ValidationBehavior`	`ValidationBehavior::Native`	Chooses blocking native or non-blocking allow behavior.
`validation_errors(errors)`	`errors`	—	Server messages take precedence over the custom validator.
`min_value(value)`	`number`	—	Inclusive lower bound for typing, keys, wheel input and steppers.
`max_value(value)`	`number`	—	Inclusive upper bound for typing, keys, wheel input and steppers.
`step(value)`	`number`	`1`	Positive finite increment lattice shared by every input path.
`is_disabled(bool)`	`bool`	`false`	Dims the whole field, removes interaction and omits form data.
`is_read_only(bool)`	`bool`	`false`	Keeps the field focusable while blocking text, key, wheel and stepper edits.
`name(value)`	`string`	—	Registers the current number under this form field name.
`auto_focus(bool)`	`bool`	`false`	Focuses the numeric input once, including when replacement content is rendered.
`vertical_steppers(bool)`	`bool`	—	Builds the group monolithically, including either horizontal buttons or the documented vertical-chevron composition.
`increment_icon(icon)`	`icon`	`<IconPlus />`	Replaces the increment glyph while preserving the button's spin behavior.
`decrement_icon(icon)`	`icon`	`<IconMinus />`	Replaces the decrement glyph while preserving the button's spin behavior.

Parts

Number Field parts
Part	Description
`NumberField`	Root stack owning numeric state, validation, formatting, focus and form registration.
`NumberField`	Unified 36px field shell; composition is selected through typed builders rather than arbitrary children.
`NumberField`	Inner Input bound to NumberState and stripped of independent group-edge chrome.
`NumberField`	Built-in repeatable spin button with caller-replaceable content.
`NumberField`	Required- and invalid-aware field label above the group.
`NumberField`	Help text shown below the group while the field is valid.
`NumberField`	Resolved server, custom or controlled validation message replacing Description.

States

Number Field states
Builder	State	Description
`validation::resolve + apply_field_chrome`	`Invalid`	Invalid chrome and FieldError replace the normal description.
`is_disabled + disabled_opacity`	`Disabled`	The whole field is dimmed, inert, omitted from form data and outside the tab order.
`is_read_only interaction gates`	`Read only`	Focus remains available while every numeric mutation path is disabled.
`shared Input focus_handle + apply_field_chrome`	`Focus within`	Focus on the input or either spin button uses the unified field focus treatment.
`focus_visible + NumberFieldRenderState`	`Focus visible`	Replacement content receives keyboard-visible focus state; the built-in group uses focus-within chrome.
`group.hover(field/default hover)`	`Hovered`	The enabled unfocused group uses the hover fill and border; button hover intentionally has no additional rule body. Color interpolation is absent.
`pressed_with_background + repeat task`	`Pressed`	Press fills and geometrically scales the spin button while starting the repeat schedule; arbitrary icon children retain their own fixed size.
`is_required + NumberFieldRenderState`	`Required`	Required state reaches label, validation, form submission and replacement content.

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