Components
Loading preview...
Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icons, controlled value, validation (invalid), disabled and on-surface variants.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-time-field"use client"
import { TimeField } from "@/components/ui/heroui-time-field"
import { Description, Label } from "@heroui/react"
import { Time, getLocalTimeZone, now } from "@internationalized/date"
export default function Disabled() {
const currentTime = now(getLocalTimeZone())
const timeValue = new Time(currentTime.hour, currentTime.minute, currentTime.second)
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-8">
<div className="flex flex-col gap-4">
<TimeField isDisabled className="w-[256px]" name="time" value={timeValue}>
<Label>Time</Label>
<TimeField.Group>
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
</TimeField.Group>
<Description>This time field is disabled</Description>
</TimeField>
<TimeField isDisabled className="w-[256px]" name="time-empty">
<Label>Time</Label>
<TimeField.Group>
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
</TimeField.Group>
<Description>This time field is disabled</Description>
</TimeField>
</div>
</div>
)
}