Time Field — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::{HourCycle, Time, TimeField, TimeState};
2
3TimeField::new(self.time.clone())
4    .label("Start time")
5    .hour_cycle(HourCycle::H24)
6    .description("Click a segment, then use the steppers.")
7    .on_change(opt_time_cb(
8        cx.listener(|_, _t: &Option<Time>, _, cx| cx.notify()),
9    ))

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

Anatomy

Rust types

TimeField

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

Customization

Appearance builders and theme tokens Time Field uses.

Styling

Time Field styling
Style	Description
`flex_col + gap(px(4.))`	Four-pixel field stack with label, group and message.
`validity.first() branch`	Invalid state replaces help text with the first error.
`full_width(true)`	Full-width root and group stretch even in a non-stretching parent.
`FIELD_HEIGHT + field_radius + field tokens`	Shared base group geometry and primary field chrome; group text and slots use explicit 14px/20px metrics.
`immediate hover/focus/invalid styles`	Reaches state endpoints without property interpolation.
`group px(12px) + gap(2px)`	Segment row uses the correct padding with a 2px GPUI gap rather than CSS's 1px gap.
`px(2px) + radius_md + Consolas`	Radius and padding match; Consolas supplies tabular figures without independent text-end alignment.
`focused segment accent.soft`	Focused segments match accent-soft; invalid segment foreground is represented only by group error chrome.
`prefix/suffix + flex_shrink_0 + 4px margins`	Content is inert and placeholder-colored; spacing is expressed within the padded group.
`FieldVariant::Secondary + colors.default`	Secondary uses the neutral default palette without a shadow.

API reference

Builders

Time Field builders
Builder	Type	Default	Description
`content(render)`	`AnyElement \| Fn(values: TimeFieldRenderProps) -> AnyElement`	—	Built-in field composition or replacement content with complete field state.
`full_width(bool)`	`bool`	`false`	Expands the root and group to the available width.
`new(state)`	`state`	—	The bound TimeState entity supplies internal identity rather than a caller element id.
`value(Option<Time>, cx)`	`Option<Time>, cx`	—	Controlled plain-time value; calendar date-time and zoned types are not represented.
`default_value(Time)`	`Time`	—	Seeds an uncontrolled plain-time value once.
`on_change(callback)`	`Fn(value: TimeValue \| null) -> ()`	—	Reports a plain Time value or null.
`placeholder_value(Time)`	`Time`	`12:00 AM / 00:00`	Seeds the first edit and defaults to midnight in the active hour cycle.
`is_required(bool)`	`bool`	`false`	Marks the field required and blocks empty native submission.
`is_invalid(bool)`	`bool`	`false`	Forces invalid chrome and validation reporting.
`min_value(Time)`	`Time`	—	Inclusive minimum plain time.
`max_value(Time)`	`Time`	—	Inclusive maximum plain time.
`validate(callback)`	`Fn(value: TimeValue) -> ValidationError \| true \| null`	—	Custom validation returns one optional GPUI message.
`validation_behavior(ValidationBehavior)`	`ValidationBehavior`	`ValidationBehavior::Native`	Chooses blocking native or non-blocking allow behavior.
`granularity(TimeGranularity)`	`TimeGranularity`	`TimeGranularity::Minute`	Controls the smallest visible and submitted unit.
`hour_cycle(HourCycle)`	`HourCycle`	`HourCycle::Locale`	Defaults to the system regional time format; an explicit cycle overrides it.
`should_force_leading_zeros(bool)`	`bool`	`locale`	Forces a two-digit hour when true; otherwise numeric padding follows the system regional time pattern.
`is_disabled(bool)`	`bool`	`false`	Dims the whole field, removes interaction and omits form data.
`is_read_only(bool)`	`bool`	`false`	Keeps segment navigation and focus while blocking edits.
`name(value) + form_field(cx)`	`value) + form_field(cx`	—	Registers a live ISO time FormField.
`auto_focus(bool)`	`bool`	`false`	Focuses the segmented input on first render, including replacement content.
`variant(FieldVariant)`	`FieldVariant`	`FieldVariant::Primary`	The monolithic group and input share one field variant.
`segment(render)`	`DateSegment`	—	Hands custom content each time segment and its system-regional generated text.
`prefix(element)`	`AnyElement`	—	Inert content before the segments.
`suffix(element)`	`AnyElement`	—	Inert content after the segments.

Parts

Time Field parts
Part	Description
`TimeField`	Field state, validation and form owner.
`TimeField`	Optional label with required, invalid and disabled state.
`TimeField`	Focusable field chrome around input, prefix and suffix.
`TimeField`	Built-in segmented input rather than an independently composable part.
`TimeField`	Keyboard-editable time segment with custom content support.
`TimeField`	Inert leading content.
`TimeField`	Inert trailing content.
`TimeField`	Optional help text hidden when invalid.
`TimeField`	Resolved validation message; the built-in equivalent is ErrorMessage.

States

Time Field states
Builder	State	Description
`hover field background`	`Hovered`	Interactive group uses its variant hover fill outside focus.
`focus_handle + ring_if_focused`	`Focus within`	Focused segments ring the field and use focus chrome.
`validation::resolve + invalid chrome`	`Invalid`	Danger field styling replaces description with the resolved error.
`is_disabled + disabled_opacity`	`Disabled`	The whole field is dimmed and inert.
`is_read_only gates edits`	`Read only`	Segments remain navigable but cannot change.
`is_required + FormField`	`Required`	Label marker and native form validation reflect required state.
`TimeState::focused + accent.soft`	`Segment focused`	Active segment uses accent-soft selection chrome.
`TimeState cleared/display_value`	`Segment placeholder`	Incomplete segments use placeholder text.

Calendar Date Field Date Picker Date Range Picker Range Calendar