TextInput Group

The TextInputGroup component lives in 2 different packages:

Text type - @heathmont/moon-core

Select type - @heathmont/moon-select

!!! TextInput Group is supported only in size `xlarge`.

Default

Combined

City
City

Combined vertical

City
City

RTL

Text type variants

Single Select variant

Choose an option
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

Choose an option
xLarge
Choose an option

Access Values by ref

Country: EstoniaPhone: +372 45678901

Access Values (Select) by event listener

Country
Vehicle
Country: Vehicle:

Props (Text types)

NameTypeRequiredDefaultDescription
inputPropsobject { input1: TextInputTypes, input2: TextInputTypes }Yesobject { inputSize: 'xlarge', type: 'text' }Props for the text input fields. See TextInput component
orientationvertical | horizontalNohorizontalHow the fields are positioned with one another
isRtlbooleanNofalseText direction

Props (Select types)

NameTypeRequiredDefaultDescription
selectPropsobject { input1: SelectProps, input2: SelectProps }Yesobject {}Props for the select fields. See Single Select and Multi Select components
orientationvertical | horizontalNohorizontalHow the fields are positioned with one another
isRtlbooleanNofalseText direction