DOM Studio

Component

Vue Class Toggle Input Component

<DomClassToggleInput>

Autocomplete class names, then toggle each utility on or off without losing the list.

Playground

Class ledger

Class toggle input playground

Use the inspector to change the active and inactive class lists.

Toggle utilities without deleting them.

Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomClassToggleInput } from '@getdom/studio';

const data = reactive({
		"modelValue": "flex min-w-0 text-2xl",
		"id": "",
		"name": "",
		"label": "Classes",
		"description": "Toggle utilities without deleting them.",
		"placeholder": "Add new class",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"inactiveValues": [
			"md:h-full",
			"md:overflow-y-auto"
		],
		"options": [
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			},
			{
				"label": "",
				"value": "",
				"description": ""
			}
		],
		"allowCustom": true,
		"filterOptions": true,
		"maxOptions": 8,
		"emptyText": "No matching classes"
	});
</script>

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

Demo

Tailwind utility editor

The active classes are emitted as a normal class string, while disabled utilities stay available as unchecked rows.

Type a utility and press Enter. Checkboxes toggle classes in and out of the final class string.

Enabled class string

flex md:h-full md:overflow-y-auto md:pr-2 md:py-10 min-w-0 text-2xl
TailwindClassLedger.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomClassToggleInput } from '@getdom/studio';
import { tailwindClassIndex } from '../../_shared/serverLookup.js';

const classes = ref('flex md:h-full md:overflow-y-auto md:pr-2 md:py-10 min-w-0 text-2xl');
const inactiveClasses = ref(['bg-white', 'rounded-xl']);
</script>

<template>
	<div class="grid w-full max-w-2xl gap-3">
		<DomClassToggleInput
			v-model="classes"
			v-model:inactive-values="inactiveClasses"
			:options="tailwindClassIndex"
			label="Classes"
			description="Type a utility and press Enter. Checkboxes toggle classes in and out of the final class string."
			placeholder="Add new class"
		/>
		<div class="rounded-2xl border border-border bg-secondary/40 p-3 text-xs">
			<p class="text-muted-fg">Enabled class string</p>
			<code class="mt-1 block break-all font-mono text-canvas-fg">{{ classes || 'None' }}</code>
		</div>
	</div>
</template>

Props

Props

NameTypeDefaultDescription
v-modelstring''Enabled classes as a space-separated string.
v-model:inactiveValuesstring[][]Known classes that remain visible but are currently toggled off.
optionsArray<{ value, label, description }> | string[][]Autocomplete suggestions for class names.
allowCustombooleantrueAllow typed classes that are not present in options.
filterOptionsbooleantrueFilter options locally as the user types.
maxOptionsnumber8Maximum suggestions to show.