Components
Headline
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
Separator without text
Separator mit text
BeispielText
Button default (color primary)
Button default (color primary) disabled
Button color secondary
Button color secondary disabled
RadioGroup with RadioGroupButtonInput

Selected: car

RadioGroup with RadioGroupBoxInput with actions from outside

Selected: car

RadioGroup with RadioGroupBoxInput

Selected: car

RadioGroup with RadioGroupBoxInput with actions from outside

Selected: car

RadioGroup

Selected: car

RadioGroup with actions from outside

Selected: car

RadioGroup disabled

Selected: car

RadioGroup disabled button "car"

Selected: car

CheckboxInput with actions from outside

Checked: yes

CheckboxInput disabled with actions from outside

Checked: yes

ToggleSwitchInput

Checked: no

ToggleSwitchInput disabled

Checked: no

ToggleSwitchInput with actions from outside
ToggleSwitchInput disabled with actions from outside
TextInput controlled
TextInput controlled with actions from outside
TextInput disabled controlled
TextInput uncontrolled
TextInput uncontrolled with actions from outside
TextInput disabled uncontrolled
NumberInput controlled
NumberInput controlled with actions from outside
NumberInput disabled controlled
NumberInput uncontrolled
NumberInput uncontrolled with actions from outside
NumberInput disabled uncontrolled
NumberPlusMinusInput controlled
NumberPlusMinusInput step 0.5, controlled with actions from outside
NumberPlusMinusInput disabled, controlled
NumberPlusMinusInput min -1, max 3, step 0.5, controlled
NumberPlusMinusInput uncontrolled
NumberPlusMinusInput min -3, max 3, step 0.5, uncontrolled with actions from outside
NumberPlusMinusInput disabled, uncontrolled
NumberPlusMinusInput min -1, max 3, step 0.5, uncontrolled
DateInput
DateInput, minDate = 2021-08-14, maxDate = 2021-09-05
DateInput with actions from outside
SelectInput
Bitte auswählen
  • Weisswein
  • Bier
  • 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
  • Das ist ein Beispiel für einen wirklich sehr langen Text
SelectInput disabled
Bitte auswählen
  • Weisswein
  • Bier
  • 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
  • Das ist ein Beispiel für einen wirklich sehr langen Text
SelectInput multiple
Bitte auswählen
  • Weisswein
  • Bier
  • 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
  • Das ist ein Beispiel für einen wirklich sehr langen Text
SelectInput multiple disabled
Bitte auswählen
  • Weisswein
  • Bier
  • 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
  • Das ist ein Beispiel für einen wirklich sehr langen Text
ButtonRadio mit ButtonRadioButtons mit Icons
ButtonRadio mit ButtonRadioButtons ohne Icons
ButtonRadio mit Custom-Buttons
ButtonRadio Flexbox
ButtonRadio mit ButtonRadioButtons disabled
ButtonRadio mit Custom-Buttons disabled
ButtonRadioButton mit Icon
ButtonRadioButton mit Icon disabled
ButtonRadioButton without label
ButtonRadioButton without label, disabled
SliderInput disabled, min 0, max 150, step 1 controlled
SliderInput min 0, max 150, step 1, valueLabel auto controlled
SliderInput min 0, max 150, step 1, valueLabel on controlled
0
SliderInput axis y, min 0, max 150, step 1, valueLabel auto, valueLabelFormat string controlled
SliderInput axis y, min 0, max 150, step 1, valueLabel on, valueLabelFormat string controlled
0 Punkte
SliderInput min 0, max 100, step 10, marks true controlled
0
10
20
30
40
50
60
70
80
90
100
SliderInput min 50, max 150, step 10, marks true
50
60
70
80
90
100
110
120
130
140
150
SliderInput min 50, max 150, step 10, marks true with actions from outside
50
60
70
80
90
100
110
120
130
140
150
SliderInput min 50, max 150, step 10, marks true, marksPositionReverse
50
60
70
80
90
100
110
120
130
140
150
SliderInput reverse, min 0, max 100, step 10, marks true controlled
0
10
20
30
40
50
60
70
80
90
100
SliderInput min 50, max 150, step 10, marks true with actions from outside
0
10
20
30
40
50
60
70
80
90
100
SliderInput reverse, min 50, max 150, step 10, marks true
50
60
70
80
90
100
110
120
130
140
150
SliderInput reverse, min 50, max 150, step 10, marks true, marksPositionReverse
50
60
70
80
90
100
110
120
130
140
150
SliderInput reverse, min 50, max 150, step 10, marks [{ value: 70 }, { value: 100, label: <strong>100, Mitte</strong> }, { value: 130 }], marksPositionReverse
70
100, Mitte
130
SliderInput reverse, min 50, max 150, step 10, marks [{ value: 50, label: '50, Min' }, { value: 60, label: null }, { value: 70 }, { value: 80, label: null }, { value: 90, label: null }, { value: 100, label: <strong>100, Mitte</strong> }, { value: 110, label: null }, { value: 120, label: null }, { value: 130 }, { value: 140, label: null }, { value: 150, label: '150, Max' }], marksPositionReverse
50, Min
70
100, Mitte
130
150, Max
SliderInput axis y, min 0, max 150, step 1, valueLabel auto, valueLabelFormat JSX controlled
SliderInput axis y, min 0, max 150, step 1, valueLabel on, valueLabelFormat JSX controlled
0 Punkte
SliderInput axis y, min 0, max 150, step 1, valueLabel on, valueLabelPositionReverse, valueLabelFormat JSX controlled
0 Punkte
SliderInput min 0, max 150, step 1 controlled
SliderInput reverse, min 0, max 150, step 1 controlled
SliderInput axis y, min 0, max 150, step 1 controlled
SliderInput axis y, reverse, min 0, max 150, step 1 controlled
SliderInput axis y, min 0, max 150, step 1, valueLabel auto, valueLabelFormat string controlled
SliderInput axis y, min 0, max 100, step 10, marks true controlled
0
10
20
30
40
50
60
70
80
90
100
SliderInput axis y, min 50, max 150, step 10, valueLabel auto, marks true
50
60
70
80
90
100
110
120
130
140
150
SliderInput axis y, reverse, min 50, max 150, step 10, valueLabel auto, marks true
50
60
70
80
90
100
110
120
130
140
150
SliderInput axis y, min 50, max 150, step 10, valueLabel on, marks true, marksPositionReverse
50
60
70
80
90
100
110
120
130
140
150
50
SliderInput axis y, reverse, min 50, max 150, step 10, valueLabel auto, marks true, marksPositionReverse
50
60
70
80
90
100
110
120
130
140
150
SliderInput axis y, reverse, min 50, max 150, step 10, valueLabel on, marks true, marksPositionReverse
50
60
70
80
90
100
110
120
130
140
150
50
SliderInput axis y, reverse, min 50, max 150, step 10, valueLabel auto, valueLabelPositionReverse, marks true, marksPositionReverse
50
60
70
80
90
100
110
120
130
140
150
SliderInput axis y, reverse, min 0, max 150, step 1, valueLabel on, valueLabelFormat string controlled
SliderInput min 0, max 150, step 1 uncontrolled
SliderInput axis y, reverse, min 0, max 150, step 1 uncontrolled
Calendar

Oktober 2022

Selected Date:

FormBlock with labelPosition="top"
FormBlock with labelPosition="right"
FormBlock with labelPosition="bottom"
FormBlock without labelPosition or labelPosition="left"
FormBlock with labelPosition="top" with info.position="bottom", same tooltip icon
FormBlock with labelPosition="right" with info.position="left", custom tooltip icon
FormBlock with labelPosition="bottom" with info.position="top", same tooltip icon
FormBlock without labelPosition or labelPosition="left" with info.position="right", no tooltip icon
TooltipHoverTitle
TooltipPortal (react Portal)
Hover