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 type { TimeValue } from "@heroui/react"
import { Button, Description, Label } from "@heroui/react"
import { Time, getLocalTimeZone, now } from "@internationalized/date"
import { useState } from "react"
export default function Controlled() {
const [value, setValue] = useState<TimeValue | null>(null)
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-8">
<div className="flex flex-col gap-4">
<TimeField className="w-[256px]" name="time" value={value} onChange={setValue}>
<Label>Time</Label>
<TimeField.Group>
<TimeField.Input>
{(segment) => <TimeField.Segment segment={segment} />}
</TimeField.Input>
</TimeField.Group>
<Description>Current value: {value ? value.toString() : "(empty)"}</Description>
</TimeField>
<div className="flex gap-2">
<Button
variant="tertiary"
onPress={() => {
const currentTime = now(getLocalTimeZone())
setValue(new Time(currentTime.hour, currentTime.minute, currentTime.second))
}}
>
Set now
</Button>
<Button variant="tertiary" onPress={() => setValue(null)}>
Clear
</Button>
</div>
</div>
</div>
)
}