Time Picker Polaris

A React time picker component with Polaris-inspired design. Clean, accessible, and easy to use.

Features

• ✨ Shopify Polaris-inspired design
• 📱 Responsive and mobile-friendly
• ♿ Fully accessible (ARIA compliant)
• 🎨 Customizable via CSS variables
• 📦 Zero dependencies (except React)
• 🚀 Lightweight and performant

Installation

Install from npm:

npm install time-picker-polaris

Usage

Simply import and use the component - styles are automatically injected:

import { STimePicker } from 'time-picker-polaris';

function App() {
  const [time, setTime] = useState('2024-02-05T14:30:00');

  return (
    <STimePicker
      value={time}
      onChange={setTime}
      label="Select time"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | - | ISO 8601 datetime value (e.g., "2025-02-04T14:30:00") | | onChange | (value: string) => void | - | Callback when time changes, returns ISO 8601 datetime string | | label | string | - | Label text for the input | | name | string | - | Input name attribute | | disabled | boolean | false | Whether the input is disabled | | error | string | - | Error message to display | | helpText | string | - | Help text to display below input | | required | boolean | false | Whether the field is required | | labelAccessibilityVisibility | 'visible' \| 'exclusive' | 'visible' | Label visibility: 'visible' shows label, 'exclusive' hides it visually |

Examples

Basic usage

<STimePicker
  value="2024-02-05T14:30:00"
  onChange={(value) => console.log(value)}
  label="Start time"
/>

With error message

<STimePicker
  value={time}
  onChange={setTime}
  label="Meeting time"
  error="Please select a valid time"
/>

Required field

<STimePicker
  value={time}
  onChange={setTime}
  label="Appointment time"
  required
  helpText="Select your preferred time slot"
/>

Disabled state

<STimePicker
  value={time}
  onChange={setTime}
  label="Time"
  disabled
/>

Customization

The component uses CSS variables for easy customization. Override these in your CSS:

.s-time-picker {
  --s-time-picker-font-family: 'Your Font', sans-serif;
  --s-time-picker-primary: #007bff;
  --s-time-picker-radius: 8px;
  /* ... and many more */
}

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build library
npm run build

# Lint
npm run lint

License

MIT