Variable: RBooleanField
ts
const RBooleanField: DefineComponent<ExtractPropTypes<AppendDefault<{
active: BooleanConstructor;
allowUnspecifiedChoices: {
default: boolean;
type: BooleanConstructor;
};
baseColor: StringConstructor;
choices: Omit<{
default: undefined;
type: PropType<any[] | undefined>;
}, "type" | "default"> & {
default: any[] | readonly [true, false, null];
type: PropType<any[] | readonly [true, false, null] | undefined>;
};
class: PropType<any>;
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;
};
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)[];
iconForFalse: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
iconForSelectedRadio: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
iconForTrue: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
iconForUndetermined: {
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<boolean | (boolean | null)[] | 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: [boolean | ...[] | null]) => void | undefined>;
onUpdate:modelValue?: PropType<(...args: [boolean | ...[] | null]) => void | undefined>;
persistentHint: BooleanConstructor;
persistentPlaceholder: BooleanConstructor;
prefix: StringConstructor;
readonly: {
default: null;
type: PropType<boolean | null>;
};
renderAs: {
default: string;
type: PropType<"select" | "toggle" | "checkbox" | "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;
textForFalse: {
default: undefined;
type: PropType<string | undefined>;
};
textForTrue: {
default: undefined;
type: PropType<string | undefined>;
};
textForUndetermined: {
default: undefined;
type: PropType<string | undefined>;
};
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: boolean | (boolean | null)[] | null | undefined) => boolean;
update:modelValue: (value: boolean | (boolean | null)[] | null | undefined) => boolean;
}>, string, PublicProps, ToResolvedProps<ExtractPropTypes<AppendDefault<{
active: BooleanConstructor;
allowUnspecifiedChoices: {
default: boolean;
type: BooleanConstructor;
};
baseColor: StringConstructor;
choices: Omit<{
default: undefined;
type: PropType<...[] | undefined>;
}, "type" | "default"> & {
default: any[] | readonly [true, false, null];
type: PropType<any[] | readonly [true, false, null] | undefined>;
};
class: PropType<any>;
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;
};
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)[];
iconForFalse: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
iconForSelectedRadio: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
iconForTrue: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
iconForUndetermined: {
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<boolean | (boolean | null)[] | 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: [... | ... | ... | ... | ...]) => void | undefined>;
onUpdate:modelValue?: PropType<(...args: [... | ... | ... | ... | ...]) => void | undefined>;
persistentHint: BooleanConstructor;
persistentPlaceholder: BooleanConstructor;
prefix: StringConstructor;
readonly: {
default: null;
type: PropType<boolean | null>;
};
renderAs: {
default: string;
type: PropType<"select" | "toggle" | "checkbox" | "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;
textForFalse: {
default: undefined;
type: PropType<string | undefined>;
};
textForTrue: {
default: undefined;
type: PropType<string | undefined>;
};
textForUndetermined: {
default: undefined;
type: PropType<string | undefined>;
};
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: boolean | (boolean | null)[] | null | undefined) => boolean;
update:modelValue: (value: boolean | (boolean | null)[] | null | undefined) => boolean;
}>>, {
active: boolean;
allowUnspecifiedChoices: boolean;
choices: any[] | readonly [true, false, null] | undefined;
clearIcon: | IconValue
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
density: Density;
direction: "vertical" | "horizontal";
dirty: boolean;
disabled: boolean;
error: boolean;
errorMessages: string | readonly string[] | null;
focused: boolean;
glow: boolean;
iconForFalse: IconValue;
iconForSelectedRadio: IconValue;
iconForTrue: IconValue;
iconForUndetermined: IconValue;
iconForUnselectedRadio: IconValue;
label: string | undefined;
maxErrors: string | number;
menuIcon: | IconValue
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
messages: string | readonly string[];
modelValue: boolean | (boolean | null)[] | 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" | "toggle" | "checkbox" | "radio";
renderMode: "edit" | "read";
ripple: boolean;
role: string;
selectMenuIcon: IconValue;
style: StyleValue;
textForFalse: string | undefined;
textForTrue: string | undefined;
textForUndetermined: string | undefined;
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 boolean/ternary field component with configurable logic support and multiple rendering variants. Can operate as either a strict boolean field (true/false) or ternary field (true/false/null) based on choices configuration. Automatically adapts between single field editing, multiple selection management, and read-only display through the unified field composer architecture.
Supports configurable rendering as toggle, checkbox, radio group, or select dropdown. Each rendering variant maintains consistent boolean or ternary logic and provides appropriate visual feedback for indeterminate states when in ternary mode.
Example
vue
<!-- Boolean toggle (strict true/false) -->
<RBooleanField
v-model="enabled"
renderAs="toggle"
:choices="[true, false]"
label="Enable Feature"
/>
<!-- Ternary checkbox with custom text -->
<RBooleanField
v-model="permission"
renderAs="checkbox"
label="Edit Permission"
text-for-true="Granted"
text-for-false="Denied"
text-for-undetermined="Inherited"
/>
<!-- Boolean radio group for explicit choice -->
<RBooleanField
v-model="satisfied"
renderAs="radio"
label="Are you satisfied?"
:choices="[true, false]"
/>
<!-- Multiple boolean states -->
<RBooleanField
v-model="settings"
multiple
:choices="[true, false]"
label="Feature Settings"
/>
<!-- Ternary mode (default - includes null) -->
<RBooleanField
v-model="inheritedSetting"
renderAs="checkbox"
label="Use Custom Setting"
/>