Blazorise On-screen Keyboard API
Explore the Blazorise On-screen Keyboard API reference for parameters, events, methods, and related types.
For examples and usage guidance, see the On-screen Keyboard documentation.
API
Parameters
OnScreenKeyboardProvider
| Parameter | Default | Type |
|---|---|---|
AriaLabel | "On-screen keyboard" | string |
Gets or sets the keyboard aria-label. | ||
ChildContent | null | RenderFragment |
Gets or sets custom keyboard content. | ||
KeyboardSize | Medium | OnScreenKeyboardSize? |
Gets or sets the keyboard visual width. When omitted, uses the global keyboard size. Falls back to FullWidth if global keyboard options are unavailable. | ||
KeyColor | Color.Secondary | Color |
Gets or sets the button color. | ||
KeyLayout | Centered | OnScreenKeyboardKeyLayout? |
Gets or sets the key arrangement inside keyboard rows. When omitted, uses the global key layout. Falls back to Stretch if global keyboard options are unavailable. | ||
KeyMinHeight | 56 | int? |
Gets or sets the key minimum height, in pixels. When omitted, uses the global minimum height, then 56 pixels for centered keys or 40 pixels for stretched keys. | ||
KeyOutline | true | bool |
Gets or sets whether key buttons should be outlined. | ||
KeySize | Default | Size |
Gets or sets the button size. Possible values: DefaultExtraSmallSmallMediumLargeExtraLarge | ||
KeyTabIndex | -1 | int? |
Gets or sets the tab index for rendered key buttons. | ||
KeyTemplate | null | RenderFragment<OnScreenKeyboardKeyContext> |
Gets or sets the template used to render each keyboard key content. | ||
KeyWidth | 72 | int? |
Gets or sets the base key width, in pixels, used by centered key layout. When omitted, uses the global key width, falling back to 72 pixels. | ||
Placement | Bottom | OnScreenKeyboardPlacement? |
Gets or sets the keyboard placement. When omitted, uses the global keyboard placement. | ||
ShowSpecialCharactersKey | false | bool |
Gets or sets whether text keyboards should show a key that toggles special characters. When omitted, uses the global special character key option. | ||
SpecialCharactersRows | Built-in rows | IReadOnlyList<IReadOnlyList<OnScreenKeyboardKey>> |
Gets or sets the rows used when the special characters keyboard is active. When omitted, uses globally configured rows, then the built-in special character rows. | ||
BaseOnScreenKeyboardInputComponent
| Parameter | Default | Type |
|---|---|---|
AriaDescribedBy | — | string |
Specifies the aria-describedby attribute value. When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation. | ||
AriaInvalid | — | string |
Specifies the aria-invalid attribute value. When set, this value is rendered as-is and overrides the validation-derived aria-invalid state. | ||
AriaLabelledBy | — | string |
Specifies the aria-labelledby attribute value. When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel. | ||
AriaRequired | false | bool |
Specifies the aria-required attribute value. When set, this value overrides the required-field state resolved from the parent Validation. | ||
Autofocus | false | bool |
Set's the focus to the component after the rendering is done. | ||
ChildContent | null | RenderFragment |
Specifies the content to be rendered inside this BaseOnScreenKeyboardInputComponent. | ||
Disabled | false | bool |
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter. | ||
Feedback | null | RenderFragment |
Placeholder for validation messages. | ||
OnScreenKeyboard | false | bool |
Enables the on-screen keyboard for this input component. When not explicitly set, the global accessibility option is used. When omitted, uses the global accessibility setting and enabled input types. | ||
OnScreenKeyboardEnterKeyBehavior | Input-dependent | OnScreenKeyboardEnterKeyBehavior |
Specifies how the on-screen keyboard enter key should behave for this input component. Possible values: DefaultNewLineSubmitHideKeyDownWhen omitted, uses the cascading override, then the global option, then the input component's behavior. | ||
OnScreenKeyboardLayout | Input-dependent | OnScreenKeyboardLayout |
Specifies the on-screen keyboard layout for this input component. When not explicitly set, the global accessibility option is used. Possible values: TextNumericDecimalEmailUrlTelephoneWhen omitted, uses the global default layout, then the input component's layout. | ||
OnScreenKeyboardShowMode | Focus | OnScreenKeyboardShowMode |
Gets or sets how the on-screen keyboard is shown for this input. Possible values: DefaultFocusManualWhen omitted, uses the global show mode; Default resolves to Focus. | ||
ReadOnly | false | bool |
Add the readonly boolean attribute on an input to prevent modification of the input’s value. | ||
Size | Default | Size? |
Sets the size of the input control. When omitted, uses the parent Addons size, then the theme input size, then Size.Default. | ||
TabIndex | null | int? |
If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. | ||
Value | null | TValue |
Specifies the value inside the input field. | ||
ValueExpression | null | Expression<Func<TValue>> |
Specifies an expression that identifies the input value. | ||
BlazoriseOnScreenKeyboardOptions
| Parameter | Default | Type |
|---|---|---|
AutoScroll | true | bool |
If true, the focused input is scrolled into view when it would be covered by the on-screen keyboard. | ||
AutoScrollMargin | 12 | int |
Gets or sets the viewport margin, in pixels, kept between the focused input and the on-screen keyboard during automatic scrolling. | ||
DefaultLayout | null | OnScreenKeyboardLayout? |
Gets or sets the default keyboard layout. When not set, each input component chooses its own layout. | ||
Enabled | false | bool |
If true, input components can show the on-screen keyboard when they receive focus. | ||
EnterKeyBehavior | Default | OnScreenKeyboardEnterKeyBehavior |
Gets or sets how the on-screen keyboard enter key should behave. Possible values: DefaultNewLineSubmitHideKeyDown | ||
HideOnBlur | true | bool |
If true, the on-screen keyboard is hidden when the active input loses focus. | ||
HideOnEnter | true | bool |
If true, the on-screen keyboard is hidden when the enter key is pressed. | ||
InputTypes | OnScreenKeyboardInputType.Text | OnScreenKeyboardInputType.Numeric | OnScreenKeyboardInputType |
Gets or sets the input types enabled by the global on-screen keyboard option. Possible values: NoneTextNumericDateTimePickersAll | ||
KeyboardSize | Medium | OnScreenKeyboardSize |
Gets or sets the default keyboard visual width. Possible values: FullWidthSmallMediumLarge | ||
KeyLayout | Centered | OnScreenKeyboardKeyLayout |
Gets or sets the default key arrangement inside keyboard rows. Possible values: StretchCentered | ||
KeyMinHeight | null | int? |
Gets or sets the key minimum height, in pixels. | ||
KeyWidth | null | int? |
Gets or sets the base key width, in pixels, used by centered key layout. | ||
Placement | Bottom | OnScreenKeyboardPlacement |
Gets or sets the default keyboard placement. Possible values: BottomTopInline | ||
ShowMode | Focus | OnScreenKeyboardShowMode |
Gets or sets how the on-screen keyboard is shown for enabled input components. Possible values: DefaultFocusManual | ||
ShowSpecialCharactersKey | false | bool |
If true, the text keyboard includes a key that toggles special characters. | ||
SpecialCharactersRows | null | IReadOnlyList<IReadOnlyList<OnScreenKeyboardKey>> |
Gets or sets the rows used when the special characters keyboard is active. | ||
Events
OnScreenKeyboardProvider
| Event | Type |
|---|---|
LayoutProvider | Func<OnScreenKeyboardContext, IReadOnlyList<IReadOnlyList<OnScreenKeyboardKey>>> |
Gets or sets a function that resolves keyboard rows for the active input context. When omitted, uses the global layout provider, then the built-in layout. | |
BaseOnScreenKeyboardInputComponent
| Event | Type |
|---|---|
Blur | EventCallback<FocusEventArgs> |
The blur event fires when an element has lost focus. | |
CustomValidationValue | Func<TValue> |
Used to provide custom validation value on which the validation will be processed with the Validator handler. Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList. | |
FocusIn | EventCallback<FocusEventArgs> |
Notifies when the input box gains focus. | |
FocusOut | EventCallback<FocusEventArgs> |
Notifies when the input box loses focus. | |
KeyDown | EventCallback<KeyboardEventArgs> |
Notifies when a key is pressed down while the control has focus. | |
KeyPress | EventCallback<KeyboardEventArgs> |
Notifies when a key is pressed while the control has focus. | |
KeyUp | EventCallback<KeyboardEventArgs> |
Notifies when a key is released while the control has focus. | |
OnFocus | EventCallback<FocusEventArgs> |
Notifies when the input box gains or loses focus. | |
ValueChanged | EventCallback<TValue> |
Occurs after value has changed. | |
BlazoriseOnScreenKeyboardOptions
| Event | Type |
|---|---|
LayoutProvider | Func<OnScreenKeyboardContext, IReadOnlyList<IReadOnlyList<OnScreenKeyboardKey>>> |
Gets or sets a function that resolves keyboard rows for a focused input. | |
LayoutSelector | Func<OnScreenKeyboardContext, OnScreenKeyboardLayout> |
Gets or sets a function that resolves the keyboard layout for a focused input. | |
ShouldShow | Func<OnScreenKeyboardContext, bool> |
Gets or sets a predicate that decides if the keyboard should be shown for a focused input. | |
Methods
BaseOnScreenKeyboardInputComponent
| Method | Return | Parameters |
|---|---|---|
ShowOnScreenKeyboard | Task | bool focus |
Shows the on-screen keyboard for this input.
| ||
Focus | Task | bool scrollToElement |
Sets the focus on the underline element.
| ||
Revalidate | Task | — |
Forces the Validation (if any is used) to re-validate with the new custom or internal value.
| ||