Form Inputs
Bootstrap-based input controls with labels and validation messages. See also Bootstrap Forms.
<EditForm> and can be used as standalone inputs (if you don't need the validation).
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.
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.
Placeholder parameter set.
Splatting of additional attributes #
Inputs inheriting from HxInputBase support the splatting of additional attributes, specifically:
HxCheckBox,HxSwitchHxInputNumber,HxInputPercentHxInputTextBase,HxInputText,HxInputTextAreaHxSelectedBase,HxSelect
Forms layout #
Our CSS defaults bring flex-column to <form> element (EditForm component),
every single direct child component of <form> is stacked vertically.
This setup implies, whenever you want to go for horizontal stacking, you have to wrap your items in some
element (usually <div>).
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. |
| ValidationMessageMode | Adjusts how are validation messages rendered. |
| Enabled | Can be used to render individual component as disabled or override state from HxFormState. To set multiple components as disabled, use HxFormState. |