Form Inputs
Bootstrap-based input controls with labels and validation messages. See also Bootstrap Forms.
Most of our input-components do not require
<EditForm> and can be used as standalone inputs (if you don't need the validation).
All components stop the
onClick event propagation.
Basic inputs #
Sizing #
Input components allow you to set heights using InputSize parameter.
Input groups #
InputGroupStartText, InputGroupEndText, InputGroupStartTemplate, InputGroupEndTemplate
can be used for input groups before and after the input. See Input groups in Bootstrap documentation.
€.00
Floating labels #
Create beautifully simple form labels that float over your input fields.
See Bootstrap 5 documentation on Floating labels.
They are supported by HxInputText, HxInputTextArea, HxInputNumber, HxInputDate, HxAutosuggest, HxSelect, and HxInputTags.
Inputs with floating labels can't have the
Placeholder parameter set.
Splatting of additional attributes #
Inputs inheriting from HxInputBase support the splatting of additional attributes, specifically:
HxInputCheckBox,HxInputSwitchHxInputNumber,HxInputPercentHxInputTextBase,HxInputText,HxInputTextAreaHxSelectedBase,HxSelect
API
Common component properties #
| Name | Description |
| Value, ValueChanged | Value of the input. |
| Label, LabelTemplate | Label to be next to the input. Label is rendered before the input. |
| Hint, HintTemplate | Hint to be next to the input. Label is rendered after the input and validation message. |
| InputCssClass | CSS class to be set to the input. |
| ShowValidationMessage | Can be used to suppress rendering of a validation message. |
| Enabled | Can be used to render individual component as disabled or override state from HxFormState. To set multiple components as disabled, use HxFormState. |