Groups | Pear

PGroup

PGroup keeps related controls snug together. It can render as a div or form, which makes it handy for button groups and compact search fields. Use PFieldset when the whole set needs a legend, validation message, or disabled state.

Button Group

vue

<p-group>
  <p-button>One</p-button>
  <p-button>Two</p-button>
  <p-button>Three</p-button>
</p-group>

Field Group

vue

<p-group>
  <p-input
    v-model="firstName"
    name="first-name"
    placeholder="First name"
    aria-label="First name"
  />
  <p-input
    v-model="lastName"
    name="last-name"
    placeholder="Last name"
    aria-label="Last name"
  />
</p-group>

Search Group

vue

<p-group as="form" role="search" @submit.prevent>
  <p-input
    v-model="siteSearch"
    type="search"
    name="q"
    placeholder="Search"
    aria-label="Search"
  />
  <p-button type="submit" value="Search" />
</p-group>

API

Props

Name	Type	Default	Description
`as`	`'div' \| 'fieldset' \| 'form'`	'div'	Native element used for the group wrapper.
`role`	`'group' \| 'search'`	'group'	ARIA role applied to the wrapper.

Slots

Name	Type	Default	Description
`default`	`slot`	-	Grouped controls, usually buttons or compact form inputs.

Events

Name	Type	Default	Description
`native events`	`SubmitEvent, ...`	-	Native events pass through to the rendered wrapper.