Form Inputs #

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

Basic inputs #

Hint: Enter text, the value is shared with all text inputs.
SunMonTueWedThuFriSat
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
29
30
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
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
29
30
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
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
29
30
1
2
3
4
5
6
7
8
9
10
11

Sizing #

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

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.

€.00
  • Item 1
  • Item 2

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, and HxInputTags.

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.
An unhandled error has occurred. Reload 🗙