Components

OptionButtonsGroupField

Form field component for selecting options using a group of buttons.

Component

View code

Show playground

Label (optional)

Help text example

Props

Props	Required	Default	Type
`id`	`true`	—	`string`
`label`	—	—	`string`
`helpText`	—	—	`string`
`helpTextPosition`	—	`Position.BOTTOM`	`Position`
`buttons`	—	`OptionButton[]`	`array`
`modelValue`	`true`	—	`string \| string[]`
`validator`	—	`null`	`function`
`error`	—	`''`	`string`
`disabled`	—	`false`	`boolean`
`required`	—	`false`	`boolean`
`showOptionalLabel`	—	`true`	`boolean`
`optionalLabel`	—	—	`string`
`buttonStyle`	—	`ButtonStyleType.NEUTRAL_OUTLINED`	`ButtonStyleType.NEUTRAL_OUTLINED \| ButtonStyleType.PRIMARY_BRAND_SOFT`
`buttonSize`	—	—	`ButtonSize`
`isRounded`	—	`false`	`boolean`
`isMultiple`	—	`false`	`boolean`
`hasAllButton`	—	`false`	`boolean`
`allButtonText`	—	`'All'`	`string`
`allButtonValue`	—	`'all'`	`string`

Usage

id

Sets the id of the field.

 <template>
    <OptionButtonsGroupField id="field-id" />
</template>

Type: string
Required: true

label

Sets the label of the field.

 <template>
    <OptionButtonsGroupField label="Example label text" />
</template>

Type: string

helpText

Sets the help text of the field.

 <template>
    <OptionButtonsGroupField helpText="This is an example help text." />
</template>

Type: string
Default: ''

helpTextPosition

Sets the position of the help text relative to the field. It uses the Position enum.

 <template>
    <OptionButtonsGroupField helpTextPosition="top" helpText="Appears above the field" />
</template>

Type: Position
Default: Position.BOTTOM

Options

Value	Description
`TOP`	top
`BOTTOM`	bottom

buttons

Sets the buttons options of the field.

 <template>
    <OptionButtonsGroupField :buttons="exampleButtons" />
</template>
<script setup lang="ts">
const exampleButtons = ref<OptionButton[]>([
    { text: 'Option 1', value: 'option1' },
    { text: 'Option 2', value: 'option2' },
    { text: 'Option 3', value: 'option3' }
])
</script>

Type: OptionButton[]

 export interface ActionButton {
    text: string
    value: string
    ariaLabel?: string
    active?: boolean
    action?: () => void
    size?: ButtonSize
    icon?: string
    iconPosition?: IconPosition
    disabled?: boolean
}

export interface OptionButton extends ActionButton {
    styleType?: ButtonStyleType
}

ariaLabel is optional for text buttons. Use it when you need a custom accessible name.

modelValue

Sets the selected value(s) of the field.

 <template>
    <OptionButtonsGroupField v-model="selectedOption" />
</template>
<script setup lang="ts">
const selectedOption = ref<string | string[]>('')
</script>

Type: string | string[]
Required: true

validator

Sets the validator function for the field, which controls its internal validation state.

Since it can be a string or an array value, the validateArrayField or validateField utilities can be used to perform required field validation.

 <template>
    <OptionButtonsGroupField :validator="validateArrayField" />
</template>

Type: function
Default: null

error (v-model:error)

Sets the error message of the field.

 <template>
    <OptionButtonsGroupField error="This is an error message." />
</template>

Type: string
Default: ''

disabled

Sets the disabled state of the field.

 <template>
    <OptionButtonsGroupField disabled />
</template>

Type: boolean
Default: false

required

Sets the required state of the field.

 <template>
    <OptionButtonsGroupField required />
</template>

Type: boolean
Default: false

showOptionalLabel

When the field is not required, shows an "(optional)" hint next to the label. Set to false to hide it. The hint text defaults to a global setting that can be overridden project-wide, and can also be overridden per field with the optionalLabel prop.

 <template>
    <OptionButtonsGroupField label="Plan" :showOptionalLabel="false" />
</template>

Type: boolean
Default: true

optionalLabel

Overrides the "(optional)" hint text for this specific field, taking priority over the global default.

 <template>
    <OptionButtonsGroupField label="Plan" optionalLabel="(not required)" />
</template>

Type: string

buttonStyle

Sets the style of the option buttons. It uses the ButtonStyleType.NEUTRAL_OUTLINED or ButtonStyleType.PRIMARY_BRAND_SOFT enum.

 <template>
    <OptionButtonsGroupField :buttonStyle="ButtonStyleType.NEUTRAL_OUTLINED" />
</template>

Type: ButtonStyleType.NEUTRAL_OUTLINED | ButtonStyleType.PRIMARY_BRAND_SOFT
Default: ButtonStyleType.NEUTRAL_OUTLINED

Options

Value	Description
`PRIMARY_BRAND_SOFT`	Primary brand soft
`NEUTRAL_OUTLINED`	Neutral outlined

buttonSize

Sets the size of the option buttons. It uses the ButtonSize enum.

 <template>
    <OptionButtonsGroupField :buttonSize="ButtonSize.MD" />
</template>

Type: ButtonSize
Default: ButtonSize.MD

Options

Value	Description
`XS`	xs
`SM`	sm
`MD`	md
`LG`	lg
`XL`	xl
`XXL`	2xl

isRounded

Sets whether the option buttons should be rounded.

 <template>
    <OptionButtonsGroupField isRounded />
</template>

Type: boolean
Default: false

isMultiple

Sets whether multiple options can be selected.

 <template>
    <OptionButtonsGroupField isMultiple />
</template>

Type: boolean
Default: false

hasAllButton

Sets whether to include an "All" button that selects/deselects all options.

 <template>
    <OptionButtonsGroupField hasAllButton />
</template>

Type: boolean
Default: false

allButtonText

Sets the text for the "All" button.

 <template>
    <OptionButtonsGroupField allButtonText="Select All" />
</template>

Type: string
Default: 'All'

allButtonValue

Sets the value for the "All" button.

 <template>
    <OptionButtonsGroupField allButtonValue="select_all" />
</template>

Type: string
Default: 'all'