Variable: RStringField
ts
const RStringField: DefineComponent<ExtractPropTypes<AppendDefault<{
active: BooleanConstructor;
allowUnspecifiedChoices: {
default: boolean;
type: BooleanConstructor;
};
autocomplete: PropType<string>;
autofocus: BooleanConstructor;
autolink: {
default: boolean;
type: BooleanConstructor;
};
baseColor: StringConstructor;
bgColor: 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;
colorPickerIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
colorPickerModeIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
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>;
};
flat: BooleanConstructor;
focused: BooleanConstructor;
format: {
default: undefined;
type: PropType<"color" | "search" | "url" | "email" | "password" | "tel" | undefined>;
};
glow: BooleanConstructor;
hideDetails: PropType<boolean | "auto">;
hidePasswordIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
hint: StringConstructor;
href: StringConstructor;
iconColor: (StringConstructor | BooleanConstructor)[];
id: StringConstructor;
label: {
default: undefined;
type: PropType<string | undefined>;
};
loading: (StringConstructor | BooleanConstructor)[];
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<string | string[] | 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: [string | ...[] | null]) => void | undefined>;
onUpdate:modelValue?: PropType<(...args: [string | ...[] | null]) => void | undefined>;
passwordMaskIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
persistentClear: BooleanConstructor;
persistentHint: BooleanConstructor;
persistentPlaceholder: BooleanConstructor;
placeholder: StringConstructor;
prefix: StringConstructor;
readonly: {
default: null;
type: PropType<boolean | null>;
};
renderMode: {
default: string;
type: PropType<"edit" | "read">;
};
reverse: BooleanConstructor;
role: {
default: string;
type: PropType<string>;
};
rounded: {
default: undefined;
type: (NumberConstructor | StringConstructor | BooleanConstructor)[];
};
showPasswordIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
singleLine: BooleanConstructor;
style: {
default: null;
type: PropType<StyleValue>;
};
suffix: StringConstructor;
theme: StringConstructor;
tile: BooleanConstructor;
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: string | string[] | null | undefined) => boolean;
update:modelValue: (value: string | string[] | null | undefined) => boolean;
}>, string, PublicProps, ToResolvedProps<ExtractPropTypes<AppendDefault<{
active: BooleanConstructor;
allowUnspecifiedChoices: {
default: boolean;
type: BooleanConstructor;
};
autocomplete: PropType<string>;
autofocus: BooleanConstructor;
autolink: {
default: boolean;
type: BooleanConstructor;
};
baseColor: StringConstructor;
bgColor: 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;
colorPickerIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
colorPickerModeIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
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>;
};
flat: BooleanConstructor;
focused: BooleanConstructor;
format: {
default: undefined;
type: PropType<"color" | "search" | "url" | "email" | "password" | "tel" | undefined>;
};
glow: BooleanConstructor;
hideDetails: PropType<boolean | "auto">;
hidePasswordIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
hint: StringConstructor;
href: StringConstructor;
iconColor: (StringConstructor | BooleanConstructor)[];
id: StringConstructor;
label: {
default: undefined;
type: PropType<string | undefined>;
};
loading: (StringConstructor | BooleanConstructor)[];
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<string | string[] | 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>;
passwordMaskIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
persistentClear: BooleanConstructor;
persistentHint: BooleanConstructor;
persistentPlaceholder: BooleanConstructor;
placeholder: StringConstructor;
prefix: StringConstructor;
readonly: {
default: null;
type: PropType<boolean | null>;
};
renderMode: {
default: string;
type: PropType<"edit" | "read">;
};
reverse: BooleanConstructor;
role: {
default: string;
type: PropType<string>;
};
rounded: {
default: undefined;
type: (NumberConstructor | StringConstructor | BooleanConstructor)[];
};
showPasswordIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
singleLine: BooleanConstructor;
style: {
default: null;
type: PropType<StyleValue>;
};
suffix: StringConstructor;
theme: StringConstructor;
tile: BooleanConstructor;
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: string | string[] | null | undefined) => boolean;
update:modelValue: (value: string | string[] | null | undefined) => boolean;
}>>, {
active: boolean;
allowUnspecifiedChoices: boolean;
autofocus: boolean;
autolink: boolean;
choices: any[] | undefined;
clearable: boolean;
clearIcon: | IconValue
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
colorPickerIcon: IconValue;
colorPickerModeIcon: IconValue;
density: Density;
direction: "vertical" | "horizontal";
dirty: boolean;
disabled: boolean;
error: boolean;
errorMessages: string | readonly string[] | null;
flat: boolean;
focused: boolean;
format: "color" | "search" | "url" | "email" | "password" | "tel" | undefined;
glow: boolean;
hidePasswordIcon: IconValue;
label: string | undefined;
maxErrors: string | number;
menuIcon: | IconValue
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
messages: string | readonly string[];
modelValue: string | string[] | null | undefined;
multiple: boolean;
noValuesText: string | undefined;
onBlur: () => void | undefined;
onChange: () => void | undefined;
onInput: () => void | undefined;
passwordMaskIcon: IconValue;
persistentClear: boolean;
persistentHint: boolean;
persistentPlaceholder: boolean;
readonly: boolean | null;
renderMode: "edit" | "read";
reverse: boolean;
role: string;
rounded: string | number | boolean;
showPasswordIcon: IconValue;
singleLine: boolean;
style: StyleValue;
tile: boolean;
variant: | "outlined"
| "plain"
| "underlined"
| "filled"
| "solo"
| "solo-inverted"
| "solo-filled";
}, SlotsType<Partial<{
append: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
append-inner: (arg: DefaultInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
clear: (arg: DefaultInputSlot & {
props: Record<string, any>;
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
counter: (arg: VCounterSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
default: (arg: {
id: Readonly<Ref<string, string>>;
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
details: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
label: (arg: DefaultInputSlot & {
label: string | undefined;
props: Record<string, any>;
}) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
loader: (arg: LoaderSlotProps) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
message: (arg: VMessageSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
prepend: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
prepend-inner: (arg: DefaultInputSlot) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[];
}>>, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;Comprehensive string field component with extensive format support and professional UX features. Automatically adapts between single field editing, multiple selection management, and read-only display through the unified field composer architecture.
Supports 6 specialized formats: email, password, url, tel, search, and color. Each format provides tailored input behavior, validation, visual enhancements, and interactive features while maintaining consistent behavior across all modes.
Example
vue
<!-- Basic string field -->
<RStringField v-model="value" label="Enter text" />
<!-- Email with auto-linking -->
<RStringField v-model="email" format="email" autolink label="Email Address" />
<!-- Password with custom icons -->
<RStringField
v-model="password"
format="password"
label="Password"
:showPasswordIcon="() => h(VIcon, { icon: 'mdi-eye' })"
/>
<!-- Color picker -->
<RStringField v-model="color" format="color" label="Choose Color" />
<!-- Multiple selection -->
<RStringField v-model="tags" multiple label="Tags" :choices="availableTags" />