Variable: REnumField
ts
const REnumField: DefineComponent<ExtractPropTypes<AppendDefault<{
active: BooleanConstructor;
allowUnspecifiedChoices: {
default: boolean;
type: BooleanConstructor;
};
baseColor: StringConstructor;
choices: {
default: undefined;
type: PropType<any[] | undefined>;
};
class: PropType<any>;
clearable: BooleanConstructor;
clearIcon: Omit<{
default: string;
type: PropType<IconValue>;
}, "type" | "default"> & {
default: | NonNullable<IconValue>
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<
| IconValue
| () => VNode<RendererNode, RendererElement, {
[key: ...]: ...;
}>>;
};
color: StringConstructor;
density: {
default: string;
type: PropType<Density>;
validator: (v: any) => boolean;
};
direction: {
default: string;
type: PropType<"vertical" | "horizontal">;
validator: (v: any) => boolean;
};
dirty: BooleanConstructor;
disabled: {
default: null;
type: BooleanConstructor;
};
doRefreshChoices: {
default: undefined;
type: PropType<
| () => Promise<REnumFieldLoadedChoice[]>
| undefined>;
};
error: BooleanConstructor;
errorMessages: {
default: () => never[];
type: PropType<string | readonly string[] | null>;
};
focused: BooleanConstructor;
glow: BooleanConstructor;
hideDetails: PropType<boolean | "auto">;
hint: StringConstructor;
href: StringConstructor;
iconColor: (StringConstructor | BooleanConstructor)[];
iconForSelectedRadio: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
iconForUnselectedRadio: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
id: StringConstructor;
label: {
default: undefined;
type: PropType<string | undefined>;
};
maxErrors: {
default: number;
type: (NumberConstructor | StringConstructor)[];
};
maxWidth: (NumberConstructor | StringConstructor)[];
menuIcon: Omit<{
default: string;
type: PropType<IconValue>;
}, "type" | "default"> & {
default: | NonNullable<IconValue>
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<
| IconValue
| () => VNode<RendererNode, RendererElement, {
[key: ...]: ...;
}>>;
};
messages: {
default: () => never[];
type: PropType<string | readonly string[]>;
};
minWidth: (NumberConstructor | StringConstructor)[];
modelValue: {
default: undefined;
type: PropType<
| REnumFieldValue
| REnumFieldValue[]
| null
| undefined>;
};
multiple: {
default: boolean;
type: PropType<boolean>;
};
name: StringConstructor;
noValuesText: {
default: undefined;
type: PropType<string | undefined>;
};
onBlur: {
default: undefined;
type: PropType<() => void | undefined>;
};
onChange: {
default: undefined;
type: PropType<() => void | undefined>;
};
onClick:append?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:appendInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:clear?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:prepend?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:prependInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
onInput: {
default: undefined;
type: PropType<() => void | undefined>;
};
onMousedown:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
onUpdate:focused?: PropType<(...args: [boolean]) => void | undefined>;
onUpdate:model-value?: PropType<
| (...args: [REnumFieldValue | REnumFieldValue[] | null | undefined]) => void
| undefined>;
onUpdate:modelValue?: PropType<
| (...args: [REnumFieldValue | REnumFieldValue[] | null | undefined]) => void
| undefined>;
persistentHint: BooleanConstructor;
persistentPlaceholder: BooleanConstructor;
prefix: StringConstructor;
readonly: {
default: null;
type: PropType<boolean | null>;
};
renderAs: {
default: string;
type: PropType<"select" | "radio">;
};
renderMode: {
default: string;
type: PropType<"edit" | "read">;
};
ripple: {
default: boolean;
type: BooleanConstructor;
};
role: {
default: string;
type: PropType<string>;
};
selectMenuIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
style: {
default: null;
type: PropType<StyleValue>;
};
suffix: StringConstructor;
theme: StringConstructor;
to: PropType<
| string
| RouteLocationAsRelativeGeneric
| RouteLocationAsPathGeneric>;
validateOn: PropType<
| "eager"
| "input"
| "blur"
| "submit"
| "invalid-input"
| "input lazy"
| "blur lazy"
| "submit lazy"
| "invalid-input lazy"
| "input eager"
| "blur eager"
| "submit eager"
| "invalid-input eager"
| "lazy input"
| "lazy blur"
| "lazy submit"
| "lazy invalid-input"
| "eager input"
| "eager blur"
| "eager submit"
| "eager invalid-input"
| "lazy"
| undefined>;
variant: {
default: string;
type: PropType<
| "outlined"
| "plain"
| "underlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled">;
validator: (v: any) => boolean;
};
width: (NumberConstructor | StringConstructor)[];
}, {
}>>, () =>
| VNode<RendererNode, RendererElement, {
[key: string]: any;
}>
| null, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, EmitFunctions<{
click:append: (...args: [MouseEvent]) => boolean;
click:appendInner: (...args: [MouseEvent]) => boolean;
click:clear: (...args: [MouseEvent]) => boolean;
click:control: (...args: [MouseEvent]) => boolean;
click:prepend: (...args: [MouseEvent]) => boolean;
click:prependInner: (...args: [MouseEvent]) => boolean;
mousedown:control: (...args: [MouseEvent]) => boolean;
update:focused: (...args: [boolean]) => boolean;
update:model-value: (value:
| REnumFieldValue
| REnumFieldValue[]
| null
| undefined) => boolean;
update:modelValue: (value:
| REnumFieldValue
| REnumFieldValue[]
| null
| undefined) => boolean;
}>, string, PublicProps, ToResolvedProps<ExtractPropTypes<AppendDefault<{
active: BooleanConstructor;
allowUnspecifiedChoices: {
default: boolean;
type: BooleanConstructor;
};
baseColor: StringConstructor;
choices: {
default: undefined;
type: PropType<any[] | undefined>;
};
class: PropType<any>;
clearable: BooleanConstructor;
clearIcon: Omit<{
default: string;
type: PropType<IconValue>;
}, "type" | "default"> & {
default: | NonNullable<IconValue>
| () => VNode<RendererNode, RendererElement, {
[key: ...]: ...;
}>;
type: PropType<
| IconValue
| () => VNode<..., ..., ...>>;
};
color: StringConstructor;
density: {
default: string;
type: PropType<Density>;
validator: (v: any) => boolean;
};
direction: {
default: string;
type: PropType<"vertical" | "horizontal">;
validator: (v: any) => boolean;
};
dirty: BooleanConstructor;
disabled: {
default: null;
type: BooleanConstructor;
};
doRefreshChoices: {
default: undefined;
type: PropType<() => Promise<...[]> | undefined>;
};
error: BooleanConstructor;
errorMessages: {
default: () => never[];
type: PropType<string | readonly string[] | null>;
};
focused: BooleanConstructor;
glow: BooleanConstructor;
hideDetails: PropType<boolean | "auto">;
hint: StringConstructor;
href: StringConstructor;
iconColor: (StringConstructor | BooleanConstructor)[];
iconForSelectedRadio: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
iconForUnselectedRadio: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
id: StringConstructor;
label: {
default: undefined;
type: PropType<string | undefined>;
};
maxErrors: {
default: number;
type: (NumberConstructor | StringConstructor)[];
};
maxWidth: (NumberConstructor | StringConstructor)[];
menuIcon: Omit<{
default: string;
type: PropType<IconValue>;
}, "type" | "default"> & {
default: | NonNullable<IconValue>
| () => VNode<RendererNode, RendererElement, {
[key: ...]: ...;
}>;
type: PropType<
| IconValue
| () => VNode<..., ..., ...>>;
};
messages: {
default: () => never[];
type: PropType<string | readonly string[]>;
};
minWidth: (NumberConstructor | StringConstructor)[];
modelValue: {
default: undefined;
type: PropType<
| REnumFieldValue
| REnumFieldValue[]
| null
| undefined>;
};
multiple: {
default: boolean;
type: PropType<boolean>;
};
name: StringConstructor;
noValuesText: {
default: undefined;
type: PropType<string | undefined>;
};
onBlur: {
default: undefined;
type: PropType<() => void | undefined>;
};
onChange: {
default: undefined;
type: PropType<() => void | undefined>;
};
onClick:append?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:appendInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:clear?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:prepend?: PropType<(...args: [MouseEvent]) => void | undefined>;
onClick:prependInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
onInput: {
default: undefined;
type: PropType<() => void | undefined>;
};
onMousedown:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
onUpdate:focused?: PropType<(...args: [boolean]) => void | undefined>;
onUpdate:model-value?: PropType<
| (...args: [REnumFieldValue | REnumFieldValue[] | null | undefined]) => void
| undefined>;
onUpdate:modelValue?: PropType<
| (...args: [REnumFieldValue | REnumFieldValue[] | null | undefined]) => void
| undefined>;
persistentHint: BooleanConstructor;
persistentPlaceholder: BooleanConstructor;
prefix: StringConstructor;
readonly: {
default: null;
type: PropType<boolean | null>;
};
renderAs: {
default: string;
type: PropType<"select" | "radio">;
};
renderMode: {
default: string;
type: PropType<"edit" | "read">;
};
ripple: {
default: boolean;
type: BooleanConstructor;
};
role: {
default: string;
type: PropType<string>;
};
selectMenuIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
style: {
default: null;
type: PropType<StyleValue>;
};
suffix: StringConstructor;
theme: StringConstructor;
to: PropType<
| string
| RouteLocationAsRelativeGeneric
| RouteLocationAsPathGeneric>;
validateOn: PropType<
| "eager"
| "input"
| "blur"
| "submit"
| "invalid-input"
| "input lazy"
| "blur lazy"
| "submit lazy"
| "invalid-input lazy"
| "input eager"
| "blur eager"
| "submit eager"
| "invalid-input eager"
| "lazy input"
| "lazy blur"
| "lazy submit"
| "lazy invalid-input"
| "eager input"
| "eager blur"
| "eager submit"
| "eager invalid-input"
| "lazy"
| undefined>;
variant: {
default: string;
type: PropType<
| "outlined"
| "plain"
| "underlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled">;
validator: (v: any) => boolean;
};
width: (NumberConstructor | StringConstructor)[];
}, {
}>>, EmitFunctions<{
click:append: (...args: [MouseEvent]) => boolean;
click:appendInner: (...args: [MouseEvent]) => boolean;
click:clear: (...args: [MouseEvent]) => boolean;
click:control: (...args: [MouseEvent]) => boolean;
click:prepend: (...args: [MouseEvent]) => boolean;
click:prependInner: (...args: [MouseEvent]) => boolean;
mousedown:control: (...args: [MouseEvent]) => boolean;
update:focused: (...args: [boolean]) => boolean;
update:model-value: (value:
| REnumFieldValue
| REnumFieldValue[]
| null
| undefined) => boolean;
update:modelValue: (value:
| REnumFieldValue
| REnumFieldValue[]
| null
| undefined) => boolean;
}>>, {
active: boolean;
allowUnspecifiedChoices: boolean;
choices: any[] | undefined;
clearable: boolean;
clearIcon: | IconValue
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
density: Density;
direction: "vertical" | "horizontal";
dirty: boolean;
disabled: boolean;
doRefreshChoices: | () => Promise<REnumFieldLoadedChoice[]>
| undefined;
error: boolean;
errorMessages: string | readonly string[] | null;
focused: boolean;
glow: boolean;
iconForSelectedRadio: IconValue;
iconForUnselectedRadio: IconValue;
label: string | undefined;
maxErrors: string | number;
menuIcon: | IconValue
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
messages: string | readonly string[];
modelValue: | REnumFieldValue
| REnumFieldValue[]
| null
| undefined;
multiple: boolean;
noValuesText: string | undefined;
onBlur: () => void | undefined;
onChange: () => void | undefined;
onInput: () => void | undefined;
persistentHint: boolean;
persistentPlaceholder: boolean;
readonly: boolean | null;
renderAs: "select" | "radio";
renderMode: "edit" | "read";
ripple: boolean;
role: string;
selectMenuIcon: IconValue;
style: StyleValue;
variant: | "outlined"
| "plain"
| "underlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled";
}, SlotsType<Partial<{
append: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
default: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
details: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
message: (arg: VMessageSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
prepend: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
}>>, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;Comprehensive enum field component with dynamic choice loading support and multiple rendering variants. Automatically adapts between single field editing, multiple selection management, and read-only display through the unified field composer architecture.
Supports configurable rendering as autocomplete dropdown or radio group, with dynamic choice loading via callback prop for flexible data fetching strategies. Parent components control loading logic while the field focuses on rendering.
Example
vue
<!-- Static choices with select dropdown -->
<REnumField
v-model="status"
renderAs="select"
:choices="[
{ value: 'draft', label: 'Draft' },
{ value: 'published', label: 'Published' },
{ value: 'archived', label: 'Archived' },
]"
label="Status"
/>
<!-- Dynamic loading with radio buttons -->
<REnumField
v-model="category"
renderAs="radio"
:choices="categoryChoices"
:doRefreshChoices="loadCategories"
label="Category"
/>
<!-- Multiple selection with search -->
<REnumField
v-model="tags"
multiple
:choices="tagChoices"
:doRefreshChoices="loadTags"
label="Tags"
/>
<!-- Clearable enum field -->
<REnumField
v-model="priority"
:choices="priorityChoices"
clearable
label="Priority (Optional)"
/>