Pear

PFieldset

PFieldset is for grouped controls. It keeps the fieldset and legend semantics while sharing disabled, invalid, and described-by state with Pear controls.

Checkboxes
Toppings
Pick as many as you like.
vue
<p-fieldset legend="Toppings" helper="Pick as many as you like.">
  <p-checkbox v-model="toppings" value="olives">Olives</p-checkbox>
  <p-checkbox v-model="toppings" value="mushrooms">Mushrooms</p-checkbox>
  <p-checkbox v-model="toppings" value="peppers">Peppers</p-checkbox>
</p-fieldset>
Radios
Shipping
vue
<p-fieldset legend="Shipping" horizontal>
  <p-radio v-model="shipping" name="shipping" value="ground">Ground</p-radio>
  <p-radio v-model="shipping" name="shipping" value="air">Air</p-radio>
  <p-radio v-model="shipping" name="shipping" value="pickup">Pickup</p-radio>
</p-fieldset>
API

PFieldset Props

NameTypeDefaultDescription
legendstring-Fieldset legend text.
helperstring-Optional helper text.
errorstring-Validation message. Also marks the group invalid.
disabledbooleanfalseDisables the fieldset and nested controls.
invalidbooleanfalseMarks nested Pear controls invalid.
horizontalbooleanfalseLays options out in a wrapping row.
defaultslot-Grouped form controls.