TimePicker

import { FormField, TimePicker } from '@bindshq/stance-react';

export function Basic() {
  return (
    <FormField label="Send daily digest at" description="Europe/London" style={{ width: 220 }}>
      <TimePicker hourCycle={24} defaultValue="09:00" name="digestTime" />
    </FormField>
  );
}

import { useState } from 'react';
import { FormField, TimePicker } from '@bindshq/stance-react';

export function TwelveHour() {
  const [time, setTime] = useState<string | null>('16:30');
  return (
    <div style={{ display: 'grid', gap: 8, width: 220 }}>
      <FormField label="Meeting starts">
        <TimePicker hourCycle={12} value={time} onValueChange={setTime} />
      </FormField>
      <p style={{ margin: 0, fontSize: 13 }}>Stored value: {time ?? 'None'}</p>
    </div>
  );
}

import { FormField, TimePicker } from '@bindshq/stance-react';

export function Step() {
  return (
    <FormField label="Deployment slot" style={{ width: 220 }}>
      <TimePicker hourCycle={24} step={15} defaultValue="14:00" />
    </FormField>
  );
}

import { TimePicker } from '@bindshq/stance-react';

export function WithSeconds() {
  return (
    <div style={{ display: 'grid', gap: 12, width: 240 }}>
      <TimePicker
        aria-label="Sync time"
        hourCycle={24}
        showSeconds
        clearable
        defaultValue="06:00:30"
      />
      <TimePicker aria-label="Locked" hourCycle={24} disabled defaultValue="12:00" />
    </div>
  );
}