SGUI / Development
TimeField
Flexible time text entry with a selection dropdown, business-hour limits and 12/24-hour presentation.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Flexible time text entry with a selection dropdown, business-hour limits and 12/24-hour presentation.
Loading examples…
Loading examples…
Loading examples…
Explore ISO values, field states and host-owned availability. The selected example theme also applies to picker portals.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TimeField } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TimeFieldPlaygroundExample() {
// Local clock time is not an instant; hosts own timezone conversion.
const [value, setValue] = useState<string | null>("09:30:00");
return (
<>
<ThemeScope density="comfortable">
<Stack align="start" gap={3}>
<TimeField minuteStep={1} label={"Course start time"} disabled={false} readOnly={false} description={"Local value supplied by your host."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this schedule." entryMode="text" hourCycle={12} value={value} onValueChange={setValue} name="schedule" />
</Stack>
</ThemeScope>
</>
);
}
Compare segment, calendar and action target spacing in an independent scope.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TimeField } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TimeFieldCompactExample() {
// Local clock time is not an instant; hosts own timezone conversion.
const [value, setValue] = useState<string | null>("09:30:00");
return (
<>
<ThemeScope density="compact">
<Stack align="start" gap={3}>
<TimeField minuteStep={1} label={"Course start time"} disabled={false} readOnly={false} description={"Local value supplied by your host."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this schedule." entryMode="text" hourCycle={12} value={value} onValueChange={setValue} name="schedule" />
</Stack>
</ThemeScope>
</>
);
}
Compare segment, calendar and action target spacing in an independent scope.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TimeField } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TimeFieldComfortableExample() {
// Local clock time is not an instant; hosts own timezone conversion.
const [value, setValue] = useState<string | null>("09:30:00");
return (
<>
<ThemeScope density="comfortable">
<Stack align="start" gap={3}>
<TimeField minuteStep={1} label={"Course start time"} disabled={false} readOnly={false} description={"Local value supplied by your host."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this schedule." entryMode="text" hourCycle={12} value={value} onValueChange={setValue} name="schedule" />
</Stack>
</ThemeScope>
</>
);
}
Native fields serialize local values. Hosts own persistence, timezone and availability policy.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { TimeField, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function TimeFieldFormExample() {
// Local clock time is not an instant; hosts own timezone conversion.
const [value, setValue] = useState<string | null>("09:30:00");
const [submits, setSubmits] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<form onSubmit={event => { event.preventDefault(); setSubmits(count => count + 1); }}>
<Stack align="start" gap={3}>
<Stack align="start" gap={3}>
<TimeField minuteStep={1} label={"Course start time"} disabled={false} readOnly={false} description={"Local value supplied by your host."} descriptionPlacement="above" errorPlacement="below" required={true} invalid={false} errorMessage="Please review this schedule." entryMode="text" hourCycle={12} value={value} onValueChange={setValue} name="schedule" />
</Stack>
<Button type="submit">Submit schedule locally</Button>
<Typography role="status">Submitted {submits} times. Host owns persistence.</Typography>
</Stack>
</form>
</ThemeScope>
</>
);
}
Type 8a, 1300 (13:00), 315p (3:15 pm), or 17:00. Blur or Enter normalizes valid input; bare hours and compact HMM/HHMM use the 24-hour clock. The clock button or Alt+Down opens independent hour/minute/AM-PM choices. Apply commits; Cancel discards popup edits. All minute choices stay available; times outside 08:00–18:00 remain invalid. This is a local clock, without a date or timezone.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {TimeField} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function TimeText12Example() {
const [time,setTime]=useState<string|null>(null);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<TimeField label="Appointment time" entryMode="text" hourCycle={12} min="08:00:00" max="18:00:00" name="appointmentTime" value={time} onValueChange={setTime}/>
</Box>
</ThemeScope>
</>
);
}
Type 8a, 1300 (13:00), 315p (3:15 pm), or 17:00. Blur or Enter normalizes valid input; bare hours and compact HMM/HHMM use the 24-hour clock. The clock button or Alt+Down opens independent hour/minute/AM-PM choices. Apply commits; Cancel discards popup edits. All minute choices stay available; times outside 08:00–18:00 remain invalid. This is a local clock, without a date or timezone.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {TimeField} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function TimeText24Example() {
const [time,setTime]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<TimeField label="Appointment time" entryMode="text" hourCycle={24} min="08:00:00" max="18:00:00" name="appointmentTime" value={time} onValueChange={setTime}/>
</Box>
</ThemeScope>
</>
);
}