DOM Studio

Component

Native select

<DomNativeSelect>

A styled native select box that keeps browser behaviour while matching the DOM Studio form surface.

Playground

Try every prop live

Native select playground

Use this when you want browser-native select behaviour with library styling.

Choose where this should be saved.

Playground.vuevue
<script setup>
import { reactive } from 'vue';
import { DomNativeSelect } from '@getdom/studio/vue';

const data = reactive({
	  "modelValue": "design",
	  "id": "",
	  "name": "",
	  "label": "Workspace",
	  "description": "Choose where this should be saved.",
	  "placeholder": "Select an option",
	  "required": false,
	  "disabled": false,
	  "readOnly": false,
	  "invalid": false,
	  "errors": {},
	  "visible": true,
	  "validators": [],
	  "validateOnBlur": true,
	  "chrome": "field",
	  "options": [
	    {
	      "label": "Design system",
	      "value": "design"
	    },
	    {
	      "label": "Marketing site",
	      "value": "marketing"
	    },
	    {
	      "label": "Internal tools",
	      "value": "tools"
	    }
	  ]
	});
</script>

<template>
	<DomNativeSelect
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Styled native control

This is still a real select element, so mobile platforms get their native picker UI.

Native select behaviour, styled with DOM Studio tokens.

Workspace.vuevue
<script setup>
import { ref } from 'vue';
import { DomNativeSelect } from '../../../lib/vue';

const workspace = ref('design');
const workspaces = [
	{ label: 'Design system', value: 'design' },
	{ label: 'Marketing site', value: 'marketing' },
	{ label: 'Internal tools', value: 'tools' },
];
</script>

<template>
	<div class="w-full max-w-sm">
		<DomNativeSelect
			v-model="workspace"
			label="Workspace"
			description="Native select behaviour, styled with DOM Studio tokens."
			:options="workspaces"
		/>
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
placeholderstringstring'Select an option'Disabled placeholder option.
options
[
	{
		label: "Team workspace",
		value: "team",
	}
]
arrayArray<OptionsItem
type OptionsItem = {
	label?: string; // Label
	value?: string; // Value
};
>		[]Options can be strings or objects with label/value.

Field props

NameTypeTSDefaultDescription
modelValueanyany''Current field value.
idstringstring''Optional ID override. By default parent forms derive the input ID from the field path using underscores.
namestringstring''Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
labelstringstring''Visible field label.
descriptionstringstring''Optional helper copy below the field.
requiredbooleanbooleanfalseMark the field as required.
disabledbooleanbooleanfalseDisable field interaction.
readOnlybooleanbooleanfalseShow the value but prevent editing.
invalidbooleanbooleanfalseMark the field invalid.
errors
[
	{
		name: "Validation name",
		message: "Error message",
	}
]
array | object | stringArray<ErrorsItem
type ErrorsItem = {
	name?: string; // Name
	message?: string; // Message
};
>		{}Validation errors for this field.
visiblebooleanbooleantrueShow or hide the field.
validatorsarrayArray<unknown>[]Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
validateOnBlurbooleanbooleantrueRun validators when the field loses focus.
chrome'field' | falsestring'field'Render default field chrome, or false to render only the control while keeping form state wiring.

Auto-generated from Native select.props and inline _edit hints.

Events

NamePayloadDescription
@update:modelValuestringFired when the selected option changes.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.