Checkboxes & Radios

PCheckbox

PCheckbox keeps native checkbox behavior and adds the bits you usually want in Vue: boolean models, array models, switches, and indeterminate state.

Checkboxes & Switches

Agreement

I agree to the terms

Notifications

Enable notifications

Disabled states

Disabled checkboxDisabled switch

vue

<p-fieldset legend="Agreement">
  <p-checkbox v-model="acceptedTerms" name="accepted-terms">
    I agree to the terms
  </p-checkbox>
</p-fieldset>

<p-fieldset legend="Notifications">
  <p-checkbox v-model="notificationSwitch" name="notifications" switch>
    Enable notifications
  </p-checkbox>
</p-fieldset>

Checkbox Groups

vue

<p-checkbox-group
  v-model="selectedFeatures"
  legend="Features"
  name="features"
  :options="availableFeatureOptions"
/>

PRadio

PRadio is the same idea for radio buttons: native inputs with a tidy scalar v-model.

States

vue

<p-checkbox-group
  v-model="missingFeatures"
  legend="Features"
  error="Pick at least one feature."
  name="features"
  :options="availableFeatureOptions"
/>

<p-radio-group
  v-model="supportPlan"
  legend="Support plan"
  error="Choose a support plan."
  name="support-plan"
  :options="supportOptions"
/>

Radio Group

Contact preference

EmailPhoneMail

Disabled

Disabled radio

vue

<p-radio-group
  v-model="contactPreference"
  legend="Contact preference"
  name="contact-preference"
  :options="contactOptions"
/>

API

PCheckboxGroup & PRadioGroup Props

Name	Type	Default	Description
`v-model`	`PChoiceValue[] \| PChoiceValue`	-	Selected checkbox values, or the selected radio value.
`options`	`PChoiceOption[]`	-	Options with label, value, and optional disabled state.
`name`	`string`	-	Native input name. Pear creates one when omitted.
`legend`	`string`	-	Fieldset legend for the group.
`helper`	`string`	-	Helper text below the options.
`error`	`string`	-	Error text below the options. Also marks the group invalid.
`disabled`	`boolean`	false	Disables the whole group.
`invalid`	`boolean`	false	Marks the whole group invalid.
`horizontal`	`boolean`	false	Lays options out in a wrapping row.
`switch`	`boolean`	false	PCheckboxGroup only. Renders options as switches.

PCheckbox Props

Name	Type	Default	Description
`v-model`	`string \| number \| boolean \| Array<string \| number \| boolean>`	-	Checked value or selected values array.
`value`	`string \| number \| boolean`	true	Value written when checked, or array item used in group mode.
`uncheckedValue`	`string \| number \| boolean`	false	Value written when unchecked outside array mode.
`switch`	`boolean`	false	Renders the checkbox with role switch for Pico switch styling.
`indeterminate`	`boolean`	false	Sets the native indeterminate visual state.
`disabled`	`boolean`	false	Disables the checkbox. Inherits from PField when present.
`invalid`	`boolean`	false	Sets aria-invalid. Inherits from PField when present.

PRadio Props

Name	Type	Default	Description
`v-model`	`string \| number \| boolean`	-	Selected radio value.
`value`	`string \| number \| boolean`	-	Value written when this radio is checked.
`disabled`	`boolean`	false	Disables the radio. Inherits from PField when present.
`invalid`	`boolean`	false	Sets aria-invalid. Inherits from PField when present.

Slots

Name	Type	Default	Description
`default`	`slot`	-	Label content rendered next to the native checkbox or radio.
`option`	`slot`	-	PCheckboxGroup and PRadioGroup option label slot.

Events

Name	Type	Default	Description
`update:modelValue`	`value or value[]`	-	Emitted by v-model when the native input changes.