Form Inputs #

Bootstrap-based input controls with labels and validation messages. See also Bootstrap Forms.

Most of our input components can function without the <EditForm>, making them suitable for standalone use in scenarios where validation is not required.

All components stop the onClick event propagation.

Basic inputs #

HxInputText

Hint: Enter text, the value is shared with all text inputs.

HxInputTextArea

HxInputNumber

HxInputDate

HxInputDateRange

check this

switch this

Sizing #

You can adjust the height of input components using the InputSize parameter.

InputSize.Large

InputSize.Regular (default)

InputSize.Small

Input groups #

InputGroupStartText, InputGroupEndText, InputGroupStartTemplate, InputGroupEndTemplate are utilized for adding input groups before and after the main input field. See Input groups in the Bootstrap documentation.

Input groups (text)€.00

Input groups (icon)

Input groups (template with button/dropdown)

Input groups (template with checkbox/radio)

Floating labels #

Floating labels provide a sleek and simple design, floating elegantly over your input fields. See Bootstrap 5 documentation on Floating labels.
They are supported by HxInputText, HxInputTextArea, HxInputNumber, HxInputDate, HxAutosuggest, HxSelect, HxMultiSelect and HxInputTags.

Inputs with floating labels can't have the Placeholder parameter set.

Your name

Comments

Age

Splatting of additional attributes #

Inputs derived from HxInputBase are capable of splatting additional attributes.

HxCheckBox, HxSwitch
HxInputNumber, HxInputPercent
HxInputTextBase, HxInputText, HxInputTextArea
HxSelectedBase, HxSelect

Forms layout #

Our CSS defaults bring flex-column to the <form> element (EditForm component). Every single direct child component of <form> is stacked vertically.
This default layout means that for horizontal stacking, you'll need to enclose your items within an element, typically a <div>.

API #

Common component properties #

Name	Description
Value, ValueChanged	Value of the input.
Label, LabelTemplate	This specifies the label that appears adjacent to the input. It is rendered before the input field.
Hint, HintTemplate	This defines a hint accompanying the input. It is displayed following the input and any validation message.
InputCssClass	CSS class to be set for the input.
ValidationMessageMode	Adjusts how validation messages are rendered.
Enabled	Can be used to render an individual component as `disabled` or override the state from HxFormState. To disable multiple components, use `HxFormState`.