Select

Put an Option inside it for each choice. The choices open in a sheet.

Children: Components

Example

view.dml

<Select label="Delivery" placeholder="Choose how" value="{{ delivery }}" onChange="setDelivery">
  <Option value="pickup" label="Pick up in store" />
  <Option value="courier" label="Courier" />
  <Option value="post" label="Post" />
</Select>

controller.ts

export default definePage({
  initialState: { delivery: 'pickup' },
  mutations: {
    setDelivery: (_state, event: ValueEvent) => ({ delivery: event.detail.value }),
  },
});

Props

Prop	Type	What it is
`value`	`string`	The chosen option's `value`.
`label`	`string`
`placeholder`	`string`
`hint`	`string`	Help shown under the field, which `error` replaces.
`error`	`string`	Shown under the field in red, in place of `hint`.
`disabled`	`boolean`	Dims it, and the person can't use it.

Events

Event	Sends	Notes
`onChange`	`{ value }` in `detail`	The chosen option's value.

Select

Example

Props

Events

Keep reading

On this page