Form Inputs #

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

Basic inputs #

Hint: Enter text, value is shared with all text inputs.
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11

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
  • Item 1
  • Item 2

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.

Splatting of additional attributes #

Inputs inheriting from HxInputBase support the splatting of additional attributes, specifically:

  • HxCheckBox, HxSwitch
  • HxInputNumber, HxInputPercent
  • HxInputTextBase, HxInputText, HxInputTextArea
  • HxSelectedBase, 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.
An unhandled error has occurred. Reload 🗙