shadcn.io is an independent project built on shadcn/ui
A Meeting Time label and a clock icon inside a time field. The browser supplies the clock. No time is filled in.
Use it for one time of day, such as a meeting. A calendar that can include the time is a Date Picker. In Vue, Ark UI does not replace the browser's clock.
Installation
Anatomy
Usage
<Field class="w-full max-w-sm">
<FieldLabel>Meeting Time</FieldLabel>
<InputGroup class="bg-background">
<InputGroupInput type="time" />
<InputGroupAddon><ClockIcon aria-hidden="true" /></InputGroupAddon>
</InputGroup>
</Field>FAQ
What does type time give this field?
The browser's time control: hour and minute segments, AM and PM where the locale uses them, and a picker on most browsers. The value is always HH:mm in 24-hour time, such as 14:30, whatever the display.
How is the icon placed inside the field?
The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds ClockIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.
Is the icon read by screen readers?
No. ClockIcon has aria-hidden, because the Meeting Time label already names the field. The icon is a visual hint only.
How is Meeting Time tied to the field?
Clicking the label focuses the field, and screen readers announce it with the field.
Field links FieldLabel to the input inside it, so there is no id to match.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Input Group
Sets type="time". The rest is on the Input Group page.
