Date Field — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::{Date, DateField};
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        DateField::new(self.date_input.clone())
12            // v3's Usage seeds the field with `defaultValue`.
13            .default_value(Date::new(2025, 12, 25))
14            .label("Start date")
15            .on_change(opt_date_cb(cx.listener(
16                |this, d: &Option<Date>, _, cx| {
17                    this.date_iso = *d;
18                    cx.notify();
19                },
20            )))
21            .into_any_element(),
22        para(
23            &match iso {
24                Some(d) => format!("Parsed: {}", d.format_iso()),
25                None => {
26                    "Type digits, or step a segment with the arrow keys".to_owned()
27                }
28            },
29            cx,
30        ),
31    ])

Expand code

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

Anatomy

Rust types

DateField

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

Customization

Appearance builders and theme tokens Date Field uses.

Styling

Date 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 resolved error.
`full_width(true)`	Full-width root and group.
`FIELD_HEIGHT + field_radius + field tokens`	Base group geometry and primary field chrome; group text and slots use explicit 14px/20px metrics.
`immediate hover/focus/invalid styles`	Reaches each state endpoint without interpolating field properties.
`group px(12px) + gap(2px)`	Segment row uses 12px horizontal padding and a 2px GPUI gap rather than CSS's 1px gap.
`px(2px) + radius_md + Consolas`	Segment radius and padding match; Consolas supplies tabular figures, but text is not end-aligned independently.
`focused_seg accent.soft`	Focused segments use accent-soft; invalid segment foreground is only reflected by the group error chrome.
`prefix/suffix + flex_shrink_0 + 4px inner margins`	Content is inert and placeholder-colored, with equivalent spacing expressed inside the padded group.
`FieldVariant::Secondary + colors.default`	Secondary field uses the neutral default palette without a shadow.
`no stepper elements`	DateField changes only through its segments and keyboard; the removed GPUI chevrons are covered headlessly.

API reference

Builders

Date Field builders
Builder	Type	Default	Description
`content(render)`	`AnyElement \| Fn(values: DateFieldRenderProps) -> AnyElement`	—	Built-in field composition or a replacement content closure with complete field state.
`full_width(bool)`	`bool`	`false`	Expands the root and input group to the available width.
`new(state)`	`state`	—	The bound InputState entity supplies stable internal identity rather than a caller element id.
`value(Option<Date>, cx)`	`Option<Date>, cx`	—	Writes a controlled Gregorian date through the bound state.
`default_value(Date)`	`Date`	—	Seeds an uncontrolled Gregorian date once.
`on_change(callback)`	`Fn(value: DateValue \| null) -> ()`	—	Reports the date portion; time and zone value types are not surfaced.
`placeholder_value(Date)`	`Date`	—	Seeds empty-field keyboard edits with a Gregorian date.
`is_required(bool)`	`bool`	`false`	Marks the field required and blocks empty native form submission.
`is_invalid(bool)`	`bool`	`false`	Forces invalid chrome and validation reporting.
`min_value(Date)`	`Date`	—	Inclusive minimum Gregorian date.
`max_value(Date)`	`Date`	—	Inclusive maximum Gregorian date.
`is_date_unavailable(callback)`	`Fn(date: DateValue) -> bool`	—	Rejects individual Gregorian dates.
`validate(callback)`	`Fn(value: DateValue) -> ValidationError \| true \| null`	—	Custom validation returns one optional GPUI message.
`validation_behavior(ValidationBehavior)`	`ValidationBehavior`	`ValidationBehavior::Native`	Chooses blocking native or non-blocking ARIA-style form validation.
`granularity(Granularity)`	`Granularity`	`Granularity::Day`	Adds time segments through the selected smallest 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 two-digit month, day and hour segments; otherwise numeric padding follows the system regional date and time patterns.
`is_disabled(bool)`	`bool`	`false`	Dims the whole field, removes it from interaction and form data.
`is_read_only(bool)`	`bool`	`false`	Keeps segment navigation and focus while blocking edits.
`name(value) + form_field()`	`value) + form_field(`	—	Registers a live ISO-formatted FormField.
`auto_focus(bool)`	`bool`	`false`	Focuses the segmented input on first render.
`variant(FieldVariant)`	`FieldVariant`	`FieldVariant::Primary`	Selects shadowed field or lower-emphasis default surface chrome.
`segment(render)`	`DateSegment`	—	Hands custom content each supported Gregorian date or plain-time segment and its generated text. Date and time segments follow the operating system's regional order, separators, padding, and day-period names; era and time-zone segment kinds require value models does not expose.
`prefix(element)`	`AnyElement`	—	Inert content before the segmented input.
`suffix(element)`	`AnyElement`	—	Inert content after the segmented input.

Parts

Date Field parts
Part	Description
`DateField`	Field state, validation and form owner.
`DateField`	Optional built-in label with required, invalid and disabled state.
`DateField`	Focusable field chrome around input, prefix and suffix.
`DateField`	Built-in segmented input using the operating system's regional date order and separators rather than an independently composable part.
`DateField`	Keyboard-editable Gregorian date and optional plain-time segment with custom rendering and regional date order; era and time-zone kinds are unavailable with the current value model.
`DateField`	Inert leading content.
`DateField`	Inert trailing content.
`DateField`	Help text or generated format hint, hidden when invalid.
`DateField`	Resolved validation message; uses ErrorMessage as its built-in equivalent.

States

Date Field states
Builder	State	Description
`hover field background`	`Hovered`	Interactive group uses the field-hover fill outside focus.
`focus_handle + ring_if_focused`	`Focus within`	Focused segments ring the field and use focus chrome.
`validation::resolve + invalid field chrome`	`Invalid`	Danger field and segment styling replaces the description with an error.
`is_disabled + disabled_opacity`	`Disabled`	The entire 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 form validation reflect required state.
`focused_seg + accent.soft`	`Segment focused`	The active segment uses accent-soft selection chrome.
`DateFieldDisplay cleared/empty state`	`Segment placeholder`	Incomplete segments use muted placeholder text.

Calendar Date Picker Date Range Picker Range Calendar Time Field