Time field

A time of day. A styled native time input: segmented entry, the locale's 12- or 24-hour clock and a phone picker for free.

Start time

When the daily digest is sent

Reminder

Cut-off

Usage

use hydroxy_leptos::time_field::TimeField;
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let (start, set_start) = signal("09:30".to_string());
    let error = move || (start.get().as_str() < "08:00").then(|| "Office opens at 08:00".to_string());

    view! {
        <div style="display: grid; gap: var(--space-8);">
            // Controlled, with validation.
            <TimeField
                label="Start time"
                value=start
                on_input=move |v| set_start.set(v)
                hint="When the daily digest is sent"
                error=Signal::derive(error)
            />

            // Uncontrolled, to the second.
            <TimeField label="Reminder" default_value="17:45:00" step=1 name="reminder" />

            <TimeField label="Cut-off" default_value="23:00" disabled=true />
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::time_field::TimeField;

#[component]
pub fn TimeFieldDemo() -> Element {
    let mut start = use_signal(|| "09:30".to_string());
    let error = (start().as_str() < "08:00").then(|| "Office opens at 08:00".to_string());

    rsx! {
        div { style: "display: grid; gap: var(--space-8);",
            TimeField {
                label: "Start time",
                value: start(),
                on_input: move |v| start.set(v),
                hint: "When the daily digest is sent",
                error,
            }
            TimeField { label: "Reminder", default_value: "17:45:00", step: 1, name: "reminder" }
            TimeField { label: "Cut-off", default_value: "23:00", disabled: true }
        }
    }
}

Anatomy

Component	data-part	Renders
`TimeField`	root	Wrapper. data-invalid, data-disabled
`TimeField`	label	<label for> the control
`TimeField`	control	Native <input type=time>. Segments get an accent chip when focused
`TimeField`	hint	Help text, linked by aria-describedby
`TimeField`	error	Replaces the hint and sets aria-invalid

Keyboard

Key	Does
`ArrowUp / ArrowDown`	Spin the focused segment
`ArrowLeft / ArrowRight`	Previous / next segment
`0-9, A / P`	Type into the focused segment
`Backspace`	Clear the focused segment

Props

Prop	Type	Notes
`label`	String	Required. Visible label
`value`	Option<String>	Controlled "HH:MM" (24-hour). Pair with on_input
`default_value`	String	Initial value when uncontrolled
`min / max`	String	Allowed range, as "HH:MM"
`step`	u32	Seconds. Below 60 adds a seconds segment
`on_input`	Callback<String>	Called as segments change. Empty while incomplete
`hint / error`	String	Text below the field. An error replaces the hint
`disabled / required`	bool	Native disabled and required
`name`	String	Form field name