Forms

DateField

Date input with v-model support. Wraps the Polaris <s-date-field> web component.

Usage

<script setup>
const date = ref('')
</script>

<template>
  <ShDateField v-model="date" label="Start date" />
</template>

Prop	Type	Default	Description
`modelValue`	`string`	—	Bound value (use with `v-model`)
`label`	`string`	—	Input label
`allow`	`string`	—	Allowed date range
`disallow`	`string`	—	Disallowed date range
`allowDays`	`string`	—	Allowed days of week
`disallowDays`	`string`	—	Disallowed days of week
`view`	`string`	—	Calendar view
`defaultView`	`string`	—	Default calendar view
`placeholder`	`string`	—	Placeholder text
`error`	`string`	—	Error message
`details`	`string`	—	Help text below the input
`autocomplete`	`string`	—	Autocomplete attribute
`defaultValue`	`string`	—	Default value (uncontrolled)
`labelAccessibilityVisibility`	`'visible' \| 'exclusive'`	—	Label visibility for assistive tech
`readOnly`	`boolean`	—	Makes the field read-only
`required`	`boolean`	—	Marks the field as required
`disabled`	`boolean`	—	Disables the field
`id`	`string`	—	Element ID
`name`	`string`	—	Form field name

Event	Payload	Description
`update:modelValue`	`string`	Emitted when value changes (v-model)
`input`	`InputEvent`	Native input event
`change`	`InputEvent`	Native change event
`focus`	`InputEvent`	Emitted on focus
`blur`	`InputEvent`	Emitted on blur
`invalid`	`Event`	Emitted when date validation fails
`viewchange`	`Event`	Emitted when the calendar view changes

Slot	Description
`default`	Additional content

Renders as <s-date-field>. See Polaris DateField docs.

ColorField

Color input with v-model support. Wraps the Polaris <s-color-field> web component.

TextArea

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