TextInput Group

The TextInputGroup component lives in two different packages.

  1. Text type - @heathmont/moon-core
  2. 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)

NameTypeRequiredDefaultDescription
inputPropsobject { input1: TextInputTypes, input2: TextInputTypes }Yesobject { inputSize: 'medium', 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