Form primitive

Icon selector

<DomIconSelector>

A searchable select-style field for choosing SVG path icons, emoji, or app-defined symbol rows.

Playground

Try every prop live

Icon selector playground

Search the DOM Studio icon inventory and commit SVG path data through v-model.

Icon

Properties

Control props

Value

Selected icon path, emoji, component, or custom item value.

Placeholder

Search input placeholder.

Kind

Built-in collection to show before custom items.

Items

Custom icon, emoji, or symbol rows.

Include Built InsInclude DOM Studio icon and emoji collections for the selected kind.

ClearableShow a clear button when a value is selected.

LoadingShow an inline spinner while custom symbol rows are loading.

Placement

Preferred side before collision handling.

Floating Mode

viewport keeps the picker inside the browser; anchor keeps it attached while scrolling.

Panel Min Width

Minimum floating panel width as a CSS length.

Field props

Optional ID override. By default parent forms derive the input ID from the field path using underscores.

Name

Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.

Label

Visible field label.

Description

Optional helper copy below the field.

RequiredMark the field as required.

DisabledDisable field interaction.

Read OnlyShow the value but prevent editing.

InvalidMark the field invalid.

Errors

Validation errors for this field.

VisibleShow or hide the field.

Validators

No validators yet.

Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.

Validate On BlurRun validators when the field loses focus.

Chrome

Render default field chrome, or hide chrome while keeping form state wiring.

Playground.vuevue

<script setup>
import { reactive } from 'vue';
import { DomIconSelector } from '@getdom/studio/vue';

const data = reactive({
	  "modelValue": "M12 5v14M5 12h14",
	  "id": "",
	  "name": "",
	  "label": "Icon",
	  "description": "",
	  "placeholder": "Search icons",
	  "required": false,
	  "disabled": false,
	  "readOnly": false,
	  "invalid": false,
	  "errors": [],
	  "visible": true,
	  "validators": [],
	  "validateOnBlur": true,
	  "chrome": "field",
	  "kind": "icons",
	  "items": [],
	  "includeBuiltIns": true,
	  "clearable": true,
	  "loading": false,
	  "placement": "bottom",
	  "floatingMode": "viewport",
	  "panelMinWidth": "20rem"
	});
</script>

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

Demo

SVG path picker

Use the default icons collection when a component prop expects 24x24 SVG path data.

Button icon

Search DOM Studio icon paths collected from the local source.

Selected path

M12 5v14M5 12h14

IconPathPicker.vuevue

<script setup>
import { ref } from 'vue';
import { DomIconSelector } from '../../../lib/vue';

const selectedIcon = ref('M12 5v14M5 12h14');
</script>

<template>
	<div class="grid gap-4 sm:grid-cols-[minmax(0,22rem)_1fr] sm:items-start">
		<DomIconSelector
			v-model="selectedIcon"
			label="Button icon"
			description="Search DOM Studio icon paths collected from the local source."
			placeholder="Search icons"
		/>

		<div class="rounded-xl border border-border bg-secondary/40 p-4">
			<p class="text-xs font-medium uppercase tracking-wider text-muted-fg">Selected path</p>
			<code class="mt-2 block break-all text-xs leading-5 text-canvas-fg">{{ selectedIcon }}</code>
		</div>
	</div>
</template>

Demo

Emoji picker

Switch kind to emoji for reaction pickers, labels, and other compact symbol fields.

Reaction

🚀

Use the same searchable selector shape for emoji values.

🚀

EmojiPicker.vuevue

<script setup>
import { ref } from 'vue';
import { DomIconSelector } from '../../../lib/vue';

const reaction = ref('🚀');
</script>

<template>
	<div class="grid gap-4 sm:grid-cols-[minmax(0,22rem)_1fr] sm:items-start">
		<DomIconSelector
			v-model="reaction"
			kind="emoji"
			label="Reaction"
			description="Use the same searchable selector shape for emoji values."
			placeholder="Search emoji"
		/>

		<div class="flex min-h-24 items-center justify-center rounded-xl border border-border bg-secondary/40 text-5xl">
			{{ reaction }}
		</div>
	</div>
</template>

Demo

Custom symbols

Use kind custom with items when an app has its own symbol ids, status taxonomy, or third-party icon rows.

Workflow symbol

🔥

Custom rows can mix emoji, SVG path data, labels, groups, and keywords.

CustomSymbolSet.vuevue

<script setup>
import { ref } from 'vue';
import { DomIconSelector } from '../../../lib/vue';

const selectedSymbol = ref('priority-high');
const symbols = [
	{
		label: 'High priority',
		value: 'priority-high',
		group: 'Status',
		emoji: '🔥',
		keywords: 'urgent risk',
	},
	{
		label: 'Ready to ship',
		value: 'ready',
		group: 'Status',
		path: 'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM8.5 12.5l2.5 2.5 4.5-5',
		keywords: 'done approved',
	},
	{
		label: 'Needs review',
		value: 'review',
		group: 'Workflow',
		path: 'M12 4l9 16H3L12 4ZM12 9v4M12 17h.01',
		keywords: 'warning check',
	},
];
</script>

<template>
	<DomIconSelector
		v-model="selectedSymbol"
		kind="custom"
		label="Workflow symbol"
		description="Custom rows can mix emoji, SVG path data, labels, groups, and keywords."
		:items="symbols"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue` `type string \| number \| boolean \| Component = unknown;`	string \| number \| boolean \| object \| function	string \| number \| boolean \| Component	''	Selected icon path, emoji, component, or custom item value.
`placeholder`	string	string	'Search icons'	Search input placeholder.
`kind`	'icons' \| 'emoji' \| 'mixed' \| 'custom'	string	'icons'	Built-in collection to show before custom items.
`items` `[ { label: "Priority", value: "priority", path: "M12 5v14M5 12h14", emoji: "🚀", group: "Status", keywords: "launch success", } ]`	array	Array<ItemsItem `type ItemsItem = { label?: string; // Label value?: string; // Value path?: string; // SVG path emoji?: string; // Emoji group?: string; // Group keywords?: string; // Keywords };` >	[]	Custom icon, emoji, or symbol rows.
`includeBuiltIns`	boolean	boolean	true	Include DOM Studio icon and emoji collections for the selected kind.
`clearable`	boolean	boolean	true	Show a clear button when a value is selected.
`loading`	boolean \| string	string	false	Show an inline spinner while custom symbol rows are loading.
`placement`	'bottom' \| 'top' \| 'right' \| 'left'	string	'bottom'	Preferred side before collision handling.
`floatingMode`	'viewport' \| 'anchor'	string	'viewport'	viewport keeps the picker inside the browser; anchor keeps it attached while scrolling.
`panelMinWidth`	string	string	'20rem'	Minimum floating panel width as a CSS length.

Field props

Name	Type	TS	Default	Description
`id`	string	string	''	Optional ID override. By default parent forms derive the input ID from the field path using underscores.
`name`	string	string	''	Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
`label`	string	string	''	Visible field label.
`description`	string	string	''	Optional helper copy below the field.
`required`	boolean	boolean	false	Mark the field as required.
`disabled`	boolean	boolean	false	Disable field interaction.
`readOnly`	boolean	boolean	false	Show the value but prevent editing.
`invalid`	boolean	boolean	false	Mark the field invalid.
`errors` `[ { name: "Validation name", message: "Error message", } ]`	array \| object \| string	Array<ErrorsItem `type ErrorsItem = { name?: string; // Name message?: string; // Message };` >	[]	Validation errors for this field.
`visible`	boolean	boolean	true	Show or hide the field.
`validators`	array	Array<unknown>	[]	Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
`validateOnBlur`	boolean	boolean	true	Run validators when the field loses focus.
`chrome`	'field' \| 'none' \| false	string	'field'	Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Icon selector.props and inline _edit hints.

Slots

Name	Scope	Description
#preview	{ item }	Replace the selected-value preview inside the input.
#item	{ item, selected }	Replace each icon, emoji, or custom row in the picker panel.

Events

Name	Payload	Description
@update:modelValue	string \| number \| boolean \| Component	Fired with the selected icon path, emoji, component, or custom item value.
@select	{ item, value, label }	Fired when a picker item is selected.
@query	string	Fired as the user searches the picker.
@focus	—	—
@blur	—	—

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