Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProSeven toggle buttons for the days of the week, ordered from the locale's first day, with a minimum, disabled days and weekday and weekend shortcuts.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it to choose which days something happens: alert days, working days, class days. Narrow labels (M T W) keep it small on a phone.
For times within those days use availability-grid or business-hours-editor.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number[] | [] | Selected days, 0 = Sunday ... 6 = Saturday. |
| onValueChange | (value: number[]) => void | - | Sorted days. |
| minSelected | number | 0 | The last days cannot be switched off. |
| disabledDays | number[] | [] | Days that cannot change. |
| firstDay | number | from locale | First button. |
| width | narrow | short | long | short | Label length. |
| shortcuts | boolean | false | Weekdays, Weekend and Every day buttons. |
| Keys | Action |
|---|---|
| Left / Right | Move between days (swapped in right-to-left text, wrapping) |
| Home / End | First and last day |
| Space / Enter | Toggles the focused day |
group of buttons with aria-pressed; each is named by the full weekday ("Monday") even when the label is "M".tabindex). Disabled days are disabled.Date.getDay() and RRULE conversion.