Time Field — HeroGPUI

TimeField on docs.rs Source at v0.14.0

Usage

Showing 24-hour, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.

24-hour

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18use herogpui::prelude::{HourCycle, Time, TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-24-hour", cx))
        .label("Start time")
        .hour_cycle(HourCycle::H24)
        .description("Click a segment, then use the steppers.")
        .on_change(
            cx.listener(|_, _t: &Option<Time>, _, cx| cx.notify()),
        )
        .into_any_element()])

12-hour with seconds

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18use herogpui::prelude::{HourCycle, Time, TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-12-hour-seconds", cx))
        .label("Reminder")
        .hour_cycle(HourCycle::H12)
        .show_seconds(true)
        .on_change(
            cx.listener(|_, _t: &Option<Time>, _, cx| cx.notify()),
        )
        .into_any_element()])

Uses your system regional segment order, separators, padding, day-period names, and 12- or 24-hour cycle. Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16use herogpui::prelude::{TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![
        TimeField::new(self.demo_time("tmf-usage", cx))
            .label("Time")
            .radius(px(4.))
            .into_any_element(),
    ])

Box Customisation

The same box seam as the other fields: `height`, `padding_x` and `is_bare`. Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18use herogpui::prelude::{ActiveTheme, TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-custom-box", cx))
        .label("Compact")
        .height(px(28.))
        .padding_x(px(8.))
        .is_bare(true)
        .stepper_hover_bg(cx.colors().accent.soft())
        .font_family(MONO_FONT)
        .into_any_element()])

Also calls MONO_FONT (included when you copy).

With Icons

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18use herogpui::prelude::{ActiveTheme, TimeField, TimeState, icons};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-icon", cx))
        .label("Time")
        .prefix(gpui::svg()
                    .size(px(16.))
                    .path(icons::SUN)
                    .text_color(cx.colors().foreground)
                    .into_any_element())
        .into_any_element()])

On Surface

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20use herogpui::prelude::{FieldVariant, Surface, TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![Surface::new()
        .padding(px(24.))
        .gap(px(16.))
        .child(
            TimeField::new(self.demo_time("tmf-surface", cx))
                .label("Time")
                .variant(FieldVariant::Secondary),
        )
        .into_any_element()])

Expand code

With Description

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14use herogpui::prelude::{TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-desc", cx))
        .label("Time")
        .description("Hour and minute")
        .into_any_element()])

Required Field

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14use herogpui::prelude::{TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-req", cx))
        .label("Time")
        .is_required(true)
        .into_any_element()])

Disabled State

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14use herogpui::prelude::{TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-dis", cx))
        .label("Time")
        .is_disabled(true)
        .into_any_element()])

Full Width

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12use herogpui::prelude::{TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .w(px(400.))
    .child(
        TimeField::new(self.demo_time("tmf-full", cx))
            .label("Time")
            .full_width(true),
    )

Validation

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19use herogpui::prelude::{Time, TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-invalid", cx))
        .label("Time")
        // `minValue`/`maxValue` clamp what the segments accept.
        .min_value(Time::new(9, 0))
        .max_value(Time::new(17, 30))
        .is_required(true)
        .is_invalid(true)
        .error_message("Pick a time")
        .into_any_element()])

Expand code

Controlled

The field owns the value; `on_change` reports each edit. Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19use herogpui::prelude::{Time, TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        TimeField::new(self.demo_time("tmf-ctl", cx))
            .label("Time")
            .on_change(
                cx.listener(|_, _t: &Option<Time>, _, cx| cx.notify()),
            )
            .into_any_element(),
    ])

Expand code

With Validation

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19use herogpui::prelude::{TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TimeField::new(self.demo_time("tmf-validate", cx))
        .label("Meeting time")
        .description("Office hours are 09:00 to 17:00")
        .validate(|value| {
            value
                .filter(|t| t.hour < 9 || t.hour >= 17)
                .map(|_| "Pick a time inside office hours".into())
        })
        .into_any_element()])

Expand code

Form Example

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22use herogpui::prelude::{Button, Form, TimeField, TimeState};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![{
        let state = self.demo_time("tmf-form", cx);
        let field = TimeField::new(state)
            .label("Start time")
            .name("start_time")
            .is_required(true);
        Form::new()
            .child(field)
            .child(Button::new("time-field-form-submit").label("Save"))
            .into_any_element()
    }])

Expand code

Helpers used by these examples

Plain functions over the public API, defined once here and copied with each example that calls them.

MONO_FONT

1
2
3
4
5
6
7
8
9const MONO_FONT: &str = if cfg!(target_arch = "wasm32") {
    // The web shell bundles JetBrains Mono; the literal family "monospace"
    // resolves to nothing there and panics text resolution.
    "JetBrains Mono"
} else if cfg!(target_os = "macos") {
    "Menlo"
} else {
    "Consolas"
};

Anatomy

Rust types

TimeField

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

Customization

Shared appearance belongs on ThemeBuilder::components and .recipe("name"). Typed builders change how Time Field looks at one call site. Every builder also carries sx for placement, width and flex: it takes GPUI's own styling methods and refines them over the component's root after the theme, so an instance override wins. Behaviour builders live in the API reference below.

Styling

Time Field styling
Method	Values	Description
`full_width(bool)`	`true \| false`	Expands the root and group to the available width.
`variant(FieldVariant)`	`FieldVariant::Primary \| FieldVariant::Secondary`	The monolithic group and input share one field variant.

Rust

1
2
3
4
5
6
7
8// The one slot for caller-owned low-level styling: GPUI's
// styling methods, refined over the root element last.
.sx(|el| {
    el.bg(gpui::rgba(0xffa500ff))             // background
        .text_color(gpui::rgba(0x000000ff))   // text
        .w(gpui::px(13.))                     // size
        .h(gpui::px(12.))
})

API reference

Against HeroUI v3.2.6: 34 entries ported, 10 partial, 6 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Time Field builders
Builder	Values	Default	Description
`content(render)`Partial	`AnyElement \| Fn(values: TimeFieldRenderProps) -> AnyElement`	—	Built-in field composition or replacement content with complete field state.
`full_width(bool)`	`true \| false`	`false`	Expands the root and group to the available width.
`focus_ring(bool)`	`true \| false`	`true`	GPUI extension: hides only the segmented field's visual focus ring while retaining focus and editing.
`new(state)`Partial	`string`	—	The bound TimeState entity supplies internal identity rather than a caller element id. Simultaneous fields need distinct TimeState owners.
`value(Option<Time>)`Partial	`TimeValue \| null`	—	Controlled plain-time value held on the builder and synced into the state when it changes; calendar date-time and zoned types are not represented.
`default_value(Time)`Partial	`TimeValue \| null`	—	Seeds an uncontrolled plain-time value once.
`on_change(callback)`Partial	`Fn(value: TimeValue \| null) -> ()`	—	Reports a plain Time value or null.
`placeholder_value(Time)`	`TimeValue \| null`	`12:00 AM / 00:00`	Seeds the first edit and defaults to midnight in the active hour cycle.
`is_required(bool)`	`true \| false`	`false`	Marks the field required and blocks empty native submission.
`is_invalid(bool)`	`true \| false`	`false`	Forces invalid chrome and validation reporting.
`min_value(Time)`Partial	`TimeValue \| null`	—	Inclusive minimum plain time.
`max_value(Time)`Partial	`TimeValue \| null`	—	Inclusive maximum plain time.
`validate(callback)`Partial	`Fn(value: TimeValue) -> ValidationError \| true \| null`	—	Custom validation returns one optional GPUI message.
`validation_behavior(ValidationBehavior)`	`ValidationBehavior::Native \| ValidationBehavior::Aria`	`ValidationBehavior::Native`	Chooses blocking native or non-blocking allow behavior.
`granularity(TimeGranularity)`	`TimeGranularity::Hour \| TimeGranularity::Minute \| TimeGranularity::Second`	`TimeGranularity::Minute`	Controls the smallest visible and submitted unit.
`hour_cycle(HourCycle)`	`12 \| 24`	`HourCycle::Locale`	Defaults to the system regional time format; an explicit cycle overrides it.
`should_force_leading_zeros(bool)`	`true \| false`	`locale`	Forces a two-digit hour when true; otherwise numeric padding follows the system regional time pattern.
`is_disabled(bool)`	`true \| false`	`false`	Dims the whole field, removes interaction and omits form data.
`is_read_only(bool)`	`true \| false`	`false`	Keeps segment navigation and focus while blocking edits.
`name(value) + form_field(cx)`	`string`	—	Registers a live ISO time FormField.
`auto_focus(bool)`	`true \| false`	`false`	Focuses the segmented input on first render, including replacement content.
`variant(FieldVariant)`	`FieldVariant::Primary \| FieldVariant::Secondary`	`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.

Not ported6 HeroUI entries not ported

Time Field builders not ported
HeroUI v3	Why it is not ported
`TimeField.className`	Browser styles are unavailable.
`TimeField.style`	Browser inline styles are unavailable.
`TimeField.render`	Root-element substitution has no GPUI equivalent.
`TimeField.hideTimeZone`	Has no zoned time value or zone segment.
`TimeField.aria-label / aria-labelledby / aria-describedby / aria-details`	Gpui-pre 0.3.3 exposes no accessibility attribute tree.
`Composition parts.className`	Per-part browser styles are unavailable.

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`Partial	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`Partial	Resolved validation message; the built-in equivalent is ErrorMessage.

States

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

Calendar Date Field Date Picker Date Range Picker Range Calendar

Usage

Helpers used by these examples

Anatomy

Customization

Styling

API reference

Builders

Parts

States

Related components