DOM Studio

Component

Native select

<DomNativeSelect>

A styled native select for cases where browser-native picker behaviour is intentionally preferred.

Playground

Try every prop live

Native select playground

Use this only when browser-native select behaviour is specifically valuable. Prefer DomSelect for rich app option rendering.

Choose where this should be saved.

Playground.vuevue
vue
<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
vue
<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>

Guidance

Prefer rich app selects

Most application UIs should use DomSelect, DomListbox, or DomCombobox so options can show descriptions, status, avatars, counts, and metadata. Use native select for platform picker behaviour, extreme compatibility needs, or very plain settings.

View DomSelect

Reference

Props

Control props

NameTypeTSDefaultDescription
placeholderstringstring'Select an option'Disabled placeholder option.
options
ts
[
	{
		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
ts
[
	{
		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' | 'none' | falsestring'field'Render default field chrome, or hide chrome 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.