Select

Dropdown select input with v-model support. Wraps the Polaris <s-select> web component.

Usage

<script setup>
const status = ref('active')
</script>

<template>
  <ShSelect v-model="status" label="Status">
    <option value="active">Active</option>
    <option value="draft">Draft</option>
    <option value="archived">Archived</option>
  </ShSelect>
</template>

Props

Prop	Type	Default	Description
`modelValue`	`string`	—	Bound value (use with `v-model`)
`label`	`string`	—	Select label
`icon`	`PolarisIcon`	—	Icon displayed in the select
`placeholder`	`string`	—	Placeholder text
`error`	`string`	—	Error message
`details`	`string`	—	Help text below the select
`labelAccessibilityVisibility`	`'visible' \| 'exclusive'`	—	Label visibility for assistive tech
`required`	`boolean`	—	Marks the field as required
`disabled`	`boolean`	—	Disables the select
`id`	`string`	—	Element ID
`name`	`string`	—	Form field name

Events

Event	Payload	Description
`update:modelValue`	`string`	Emitted when value changes (v-model)
`change`	`Event`	Native change event
`input`	`Event`	Native input event

Slots

Slot	Description
`default`	`<option>` elements for choices

Polaris Element

Renders as <s-select>. See Polaris Select docs.

Edit this pageorReport an issue

TextArea

Multi-line text input with v-model support. Wraps the Polaris <s-text-area> web component.

Checkbox

Checkbox input with v-model support. Wraps the Polaris <s-checkbox> web component.