Quaff

QInput

Text fields collect and edit text with clear labels. Supporting hints and validation messages guide input in filled or outlined fields.

info QInput API Source
interface QInputProps extends Omit<HTMLInputAttributes, "value" | "disabled">
class
?: HTMLAttributes<HTMLDivElement>["class"] = undefined
Classes applied to the field wrapper.
dense
?: boolean = false
Makes the input component more compact.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
error
?: boolean = false
Indicates an error state for the input.
errorMessage
?: string = undefined
Message to display when the input is in an error state. Overrides the hint prop when the input is in an error state.
fillMask
?: QInputFillMask = undefined
Fills empty mask token positions with underscores, or with the first character of the provided string.
filled
?: boolean = false
Applies a filled background style to the input.
hint
?: string = undefined
Helper text displayed below the input. When the input is in an error state, the helper text will be overwritten by the error message.
label
?: string = undefined
The text to be displayed in the component. When applicable, will overwrite the children snippet content.
mask
?: string = undefined
Applies a mask to text input. Supports tokens (#, S, N, A, a, X, x) and named masks: date, datetime, time, fulltime, phone, card. Prefix a token with a backslash to render it literally (for example, \#XXXXXX).
outlined
?: boolean = false
Applies an outlined style to the input.
rounded
?: boolean = false
Makes the sides of the input round.
style
?: HTMLAttributes<HTMLDivElement>["style"] = undefined
Styles applied to the field wrapper.
unmaskedValue
?: boolean = false
Stores only mask token characters in the bindable value.
value
?: string | number | null = $bindable(undefined)
The bound value of the component.

Usage

Basic Usage
The simplest form of QInput requires a label and a bindable value.

Current value: Initial Value

Input Styles
QInput supports several visual styles: outlined, filled, and rounded. The default is a standard underline style.
Dense Layout
Use the dense prop for a more compact input field, useful in tables or forms with limited space.
Disabled State
The disabled prop prevents user interaction and visually indicates the input is inactive.
Validation and Hints
Provide user guidance with the hint prop. Indicate errors using the error prop, optionally displaying a specific errorMessage. The error message takes precedence over the hint when error is true.
Please enter your username
Username is already taken.
Only the error message shows.
Native Input Attributes
Native input attributes are forwarded to the inner input element.

Last input event value: None

Input Masks
Use mask for formatted text input. Set unmaskedValue when the bound value should only contain token characters, and fillMask when empty token positions should remain visible. Tokens: # digit, S letter, N alphanumeric, A uppercase letter, a lowercase letter, X uppercase alphanumeric, and x lowercase alphanumeric. Prefix a token with a backslash to make it literal: mask="\#XXXXXX" displays a fixed # followed by six uppercase alphanumeric characters. When passing a mask through a JavaScript string, preserve the backslash with String.raw or escape it as \\.
Mask: phone

Unmasked phone value: None

Mask: AA-####

Masked batch code: None

Using Slots for Icons and Content
Enhance inputs with icons or other elements using the prepend, append, before, and after slots. prepend and append place content inside the input's border, while before and after place it outside.
account_circle
Privacy Policy