Skip to content
On this page

SegmentedControl

Similar to InputSelect, it manages a multiple states but with a different style.

html
<Card>
    <Form>
        <SegmentedControl name="periodicity" label="Select payday" :options="segmentedControlDateOptions" />
    </Form>
</Card>

Props

Implements mixins RequiredInputMixin and BasicInputMixin.

It will use the following options:

js
const segmentedControlDateOptions = [
  { value: { id: 1, text: 'DAILY' }, text: 'Daily' },
  { value: { id: 2, text: 'WEEKLY' }, text: 'Weekly' },
  { value: { id: 3, text: 'MONTHLY' }, text: 'Monthly' }
];
  • optionValueKey (default value) and optionDefaultKey (default text). Changes which values from options will pick-up.
  • allowUnselected: wether to allow unselected value.
html
<Card>
    <Form>
        <SegmentedControl name="periodicity" label="Select payday" allowUnselected :options="segmentedControlDateOptions" />
    </Form>
</Card>

Emits

  • changeField. Custom change event.