Time Field
A segmented input for typing a time one part at a time.
Installation
Included in poetry-ui — available as
poetry_time_field
the moment you've installed Poetry,
with no per-component step. To own the source and edit it, copy it into your app:
bin/rails g poetry:add time-field
Default
<%= poetry_time_field(name: "meeting[at]", label: "Start time", value: "13:05", class: "w-56") %>
Twenty four hour
<%# hour_cycle: pins 24-hour editing regardless of the page locale;
omit it and the locale decides (a dayPeriod segment appears only
under twelve-hour cycles). %>
<%= poetry_time_field(name: "shift[start]", label: "Shift start", value: "21:15", hour_cycle: "h23", class: "w-56") %>
API
Poetry::Ui::TimeField::Component — options are
constructor keywords (the poetry_* helper forwards them);
slots are composed inside the block. Generated from the gem's source documentation.
| Option | Type | Details | Description |
|---|---|---|---|
| hour_cycle: | String | Pins the hour cycle (h12/h23/h11/h24) instead of the locale's. | |
| seconds: | Boolean | defaults to false |
Adds the seconds segment; the wire format becomes HH:MM:SS. |
Styling
Every part carries a stable data-slot attribute — target
[data-slot=…] from your own CSS to restyle it. State rides
data attributes on the parts below. This contract is verified against rendered DOM in CI.
| Part | Description |
|---|---|
| [data-slot=time-field] | Root - the controller and the enhanced/disabled surface ride here (segments inside share the date-field-* vocabulary) |
| [data-slot=time-field-group] | The bordered segment row - hidden until enhancement, then the editing surface (cn-input chrome, focus-within ring) |
| [data-slot=time-field-input] | The native <input type=time> - THE form value in both modes; tabindex -1 + aria-hidden once segments exist |
State attributes
| Part | Attribute | Condition | Values |
|---|---|---|---|
| time-field | data-enhanced | the controller connected and built segments (no JS = the native input, visible and styled) | — |
| time-field | data-disabled | disabled: is set | — |
| time-field | data-invalid | invalid: is set (the group wears the destructive ring) | — |
| time-field-group | data-disabled | disabled: is set (chrome dims, pointer events off) | — |
| time-field-group | data-invalid | invalid: is set (destructive border + ring) | — |
Wiring
The Stimulus surface each element carries — declared in the component, verified against rendered DOM in CI. Bare actions fire on the element's default event.
| Element | Controller | Wiring |
|---|---|---|
| root | poetry--core--date-field | registers · value locale (if) · value placeholder · value labels · value placeholders |
| root | poetry--core--date-field | value seconds (if seconds) · value hour_cycle (if) |
| group | poetry--core--date-field | focusGap on click · settle on focusout · target group |
| input | poetry--core--date-field | target input |