WeekDaysSelector

A day-of-week selector that supports both radio (single selection) and checkbox (multi-selection) modes. Renders Mon–Sun labels with accessible inputs.

Radio Mode (Single Day)

Demo

Recurrence Day

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Selected: monday

<script setup>
import { ref } from 'vue'
import { WeekDaysSelector } from 'praxis-vue-ui'

const day = ref('monday')
</script>

<template>
  <WeekDaysSelector v-model="day" mode="radio" label="Recurrence Day" />
  <p>Selected: {{ day }}</p>
</template>

Checkbox Mode (Multiple Days)

Checkbox Mode

Working Days

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Selected: monday, wednesday, friday

<WeekDaysSelector
  v-model="days"
  mode="checkbox"
  label="Working Days"
/>

Props

Props

Prop	Type	Default	Description
modelValuerequired	DaysChoosen | string	—	In radio mode: the selected day string (e.g. 'monday'). In checkbox mode: a DaysChoosen object with boolean values per day.
mode	'radio' | 'checkbox'	'radio'	Selection mode. Radio allows one day, checkbox allows multiple.
label	string	'Days of the week'	Label text displayed above the selector.
required	boolean	false	Marks the field as required.
disabled	boolean	false	Disables all day inputs.
showRequired	boolean	false	Shows the required asterisk on the label.

DaysChoosen Interface

interface DaysChoosen {
  sunday: boolean
  monday: boolean
  tuesday: boolean
  wednesday: boolean
  thursday: boolean
  friday: boolean
  saturday: boolean
}

Emits

Emits

Event	Payload	Description
update:modelValue	DaysChoosen | string	Emitted on day change. In radio mode: string (day name). In checkbox mode: updated DaysChoosen object.