SegmentedControl ​

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

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

Props ​

Implements mixins RequiredInputMixin and BasicInputMixin.

It will use the following options:

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.

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

Emits ​

• changeField. Custom change event.