Select and radio

This page covers:

• SelectInput
• RadioGroup

Props

SelectInput

• fieldKey?: string
• options: { value: string; label: string }[]

RadioGroup

• name?: string
• options: { value: string; label: string; description?: string }[]

Exposed CSS variables

SelectInput

• --DFV-select-input-width
• --DFV-select-input-background
• --DFV-select-input-foreground
• --DFV-select-input-border-color
• --DFV-select-input-hover-border-color
• --DFV-select-input-focus-border-color
• --DFV-select-input-focus
• --DFV-select-input-icon-color
• --DFV-select-input-icon-size

RadioGroup / Radio

• --DFV-radio-group-gap
• --DFV-radio-background
• --DFV-radio-border-color
• --DFV-radio-hover-border-color
• --DFV-radio-checked-background
• --DFV-radio-checked-border-color
• --DFV-radio-indicator
• --DFV-radio-focus
• --DFV-radio-label-color
• --DFV-radio-description-color
• --DFV-radio-content-gap

Example

vue

<script setup lang="ts">
import {
	RadioGroup,
	SelectInput,
} from "@duplojs/form/vueDesignSystem";
import { ref } from "vue";

const kind = ref<string | null>("email");
const level = ref<string | null>("medium");
</script>

<template>
	<div style="display: grid; gap: 12px;">
		<SelectInput
			v-model="kind"
			:options="[
				{ value: 'email', label: 'Email' },
				{ value: 'phone', label: 'Phone' },
			]"
		/>

		<RadioGroup
			v-model="level"
			name="level"
			:options="[
				{ value: 'low', label: 'Low' },
				{ value: 'medium', label: 'Medium', description: 'Recommended' },
				{ value: 'high', label: 'High' },
			]"
		/>
	</div>
</template>