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:

``bash
npm install time-picker-polaris
`

Usage

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

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

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

return (
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

$3

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

$3

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

$3

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

$3

`tsx
value={time}
onChange={setTime}
label="Time"
disabled
/>
`

Customization

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

`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

`bash


Install dependencies

npm install

Start dev server

npm run dev

Build library

npm run build

Lint

npm run lint
``

License

MIT