TextInput Group
The TextInputGroup component lives in two different packages.
- Text type - @heathmont/moon-core
- Select type - @heathmont/moon-select
Default
Vertical orientation
RTL
Sizes
Text type variants
Single Select variant
xLarge
Choose an option
xLarge
Choose an option
Multi Select variant
xLarge
Choose an option
xLarge
Choose an option
Single Select variant vertical orientation
xLarge
Choose an option
xLarge
Choose an option
Single Select variant RTL
xLarge
Choose an option
xLarge
Choose an option
Access Values by ref
Country: Estonia
Phone: +372 45678901
Access Values (Select) by event listener
Country
Vehicle
Country:
Vehicle:
Props (Text types)
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| inputProps | object { input1: TextInputTypes, input2: TextInputTypes } | Yes | object { inputSize: 'medium', type: 'text' } | Props for the text input fields. See TextInput component |
| orientation | vertical | horizontal | No | horizontal | How the fields are positioned with one another |
| isRtl | boolean | No | false | Text direction |
Props (Select types)
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| selectProps | object { input1: SelectProps, input2: SelectProps } | Yes | object {} | Props for the select fields. See Single Select and Multi Select components |
| orientation | vertical | horizontal | No | horizontal | How the fields are positioned with one another |
| isRtl | boolean | No | false | Text direction |