A React time picker component with Polaris-inspired design. Clean, accessible, and easy to use.
npm install time-picker-polarisA React time picker component with Polaris-inspired design. Clean, accessible, and easy to use.
- ✨ Shopify Polaris-inspired design
- 📱 Responsive and mobile-friendly
- ♿ Fully accessible (ARIA compliant)
- 🎨 Customizable via CSS variables
- 📦 Zero dependencies (except React)
- 🚀 Lightweight and performant
Install from npm:
``bash`
npm install time-picker-polaris
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 (
onChange={setTime}
label="Select time"
/>
);
}
`
| 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 |
`tsx`
onChange={(value) => console.log(value)}
label="Start time"
/>
`tsx`
onChange={setTime}
label="Meeting time"
error="Please select a valid time"
/>
`tsx`
onChange={setTime}
label="Appointment time"
required
helpText="Select your preferred time slot"
/>
`tsx`
onChange={setTime}
label="Time"
disabled
/>
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 /
}
`bashInstall dependencies
npm install
MIT