Inputs & Controls

Components that can be used to log user input.

Text Input

A basic, but highly customizable text field that logs user input from the keyboard.

Basic Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Text Input.

Field Name

The name of the value of the component used on the onChangeText function to log user input.

The value of this property is typically used when submitting data to an API using an HTTP POST request.

Multiple Lines

When enabled, the text will wrap and extend to multiples lines instead of extending past the screen.

Number of Lines

Only applicable when Multiple Lines is enabled. Allows you to set how many lines the text input will extend to.

Underline Color

Android Only. Allows you to set the color of the line that appears under text when the user is finished typing.

Max length

Allows you to set a maximum number of characters that can be entered into the input.

Clear Text on Focus

When enabled, all text in the input will be deleted when the input is focused on.

Scroll Enabled

Only applicable when Multiple Lines is enabled. When enabled, the user will be able to scroll through the text they've entered.

Disable Spell Check

When enabled, a red line will not appear under incorrectly spelled words/words not known to Auto Correct.

Auto Focus

When enabled, the keyboard will open as soon as the screen loads, and the input will immediately be ready to use.

Disabled

Allows you to disable the input field

Placeholder Text

Text to appear while the text input is blank.

Placeholder Text Color

Allows you to set the color of the placeholder text.

Password Input

When enabled, the user input is hidden on the screen and is displayed with '●'.

Clear Button Mode

iOS only. When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component.

Enables Return Key Automatically

When enabled, the return key will be disabled until the user inputs text in the field.

Advanced Configuration

Property

Description

Text Content Type

Allows you to select a content type which informs the system what to expect which prompts it to suggest proper autofill content.

Allow Font Scaling

When enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings.

Text Break Strategy

Android Only. Allows you to set how paragraphs of multiple lines will be broken up.

Auto Capitalize

Allows you to select what type of input will be capitalized.

This property is not supported by some keyboard types such as name-phone-pad.

Auto Correct

When enabled, Auto Correct will check what is being entered in the input.

Hide Caret

When enabled, the cursor in the text input will be hidden.

Hide Context Menu

When enabled, the context menu will become hidden.

Editable

Allows you to toggle if the text input is able to be used or not.

Keyboard Appearance

Determines the color of the keyboard.

Keyboard Type

Allows you to select the type of keyboard that will appear when the user focuses on the text input. Examples

Return Key Label

Android only alternative to Return Key Type.

Return Key Type

Allows you to select the type of return key the user will see.

Selection Color

Allows you to change the color of the highlight over selected text in the input.

Select Text on Focus

If enabled, all text will automatically be selected on focus.

Data

Property

Description

Initial value

Initialize the stateful component with a value from a data source.

Checkbox

A basic checkbox that a user can toggle between a selected and unselected state.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Checkbox.

Field Name

Set the name of the field in the onPress function that controls toggling the checkbox value and its state.

If you have multiple checkboxes on a screen, make sure to assign each one a different Field name. Without doing so, all checkboxes will be toggled by single user interaction.

Color

Set the background color of the checkbox for its selected state.

Unselected Color

Set the background color of the checkbox for its unselected state.

Indeterminate Color

Set the background color of the checkbox for its undefined state.

Size

Size of the checkbox.

Checked Icon

Select an icon from the icon picker to display when for the selected state.

Unchecked Icon

Select an icon from the icon picker to display when for the unselected state.

Indeterminate Icon

Select an icon from the icon picker to display when for the undefined state.

Data

Property

Description

Initial value

Initialize the stateful component with a value from a data source.

Disabled

Initialize by a boolean value from a data source.
Remove check functionality, gray out the checkbox, and sets it as unselected.

Accepted values: true or false.

Switch

A basic switch that can be toggled between a selected and unselected state.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Switch.

Field Name

Set the name of the field in the onPress function that controls toggling the switch value and its state

If you have multiple switches on a screen, make sure to assign each one a different Field name. Without doing so, all switches will be toggled by a single user interaction.

Data

Property

Description

Disabled

Remove toggle functionality, gray out the switch, and sets it as unselected. You can also initialize it by a boolean value from a data source.

Accepted values: true or false.

Initial value

Initialize the stateful component with a value from a data source.

Switch Row

A basic switch with a label that can be toggled between a selected and unselected state.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Switch Row.

Field Name

Set the name of the field in the onPress function that controls toggling the switch value and its state

If you have multiple switches on a screen, make sure to assign each one a different Field name. Without doing so, all switches will be toggled by a single user interaction.

Direction

Set the direction of label and switch component using a dropdown menu.

Values: row (default) and row-reverse.

Data

Property

Description

Label

Set the value of the label in the Switch Row component.

You can also initialize the label value from a data source.

Disabled

Remove toggle functionality, gray out the switch, and sets it as unselected. You can also initialize it by a boolean value from a data source.

Accepted values: true or false.

Radio Button

A button used to indicate a single user selection out of a list of options.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Radio Button.

Color

Select the color of the radio button in the selected state.

Unselected Color

Select the color of the radio button outline in the unselected state.

Size

Size of the Radio Button component.

Selected Icon

Select an icon from the icon picker to display when for the selected state.

Unchecked Icon

Select an icon from the icon picker to display when for the unselected state.

Data

Property

Description

Value

Initialize the stateful component with a value from a data source.

Disabled

Set the state of the Radio Button to a disabled state.

Radio Button Row

A button with a label used to indicate a single user selection out of a list of options.

Configuration

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Radio Button Row.

Direction

Set the direction of label and radio button component using a dropdown menu.

Values: row (default) and row-reverse.

Color

Select the color of the radio button in the selected state.

Unselected Color

Select the color of the radio button outline in the unselected state.

Data

Property

Description

Label

Set the value of the label in the Radio Button Row component.

You can also initialize the label value from a data source.

Value

Initialize the stateful component with a value from a data source.

Radio Button Group

A container to group one or more Radio Buttons or Radio Button Rows.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Radio Button Group.

Field Name

Set a default value of the field that controls toggling the radio buttons state and set the selected state on one of the radio button grouped together.

Direction

Set the direction of radio buttons using a dropdown menu.

Values: horizontal (default) and vertical.

Data

Property

Description

Initial Value

Initialize the stateful component with a value from a data source.

Slider

A component that allows the user to select a value from a fixed range of numbers.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Slider.

Field Name

Set the name of the field in the onChange function that controls setting the value of the slider and its state.

Step

Set the increment of the value.

Disabled

Removes slider functionality, grays out the slider and sets the value to 0.

Max Value

Maximum value of the slider.

Min Value

Minimum value of the slider.

Data

Property

Description

Initial Value

Initialize the stateful component with a value from a data source.

Accept value: any numerical value depending on the max and min value defined in Configuration.

Stepper

A basic stepper that allows the user to increase and decrease its value.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Stepper.

Field Name

Set the name of the field in the onChange function that controls setting the value of the stepper and its state.

Size

Size of the icons ('-' and '+').

Data

Property

Description

Initial Value

The initial value or the starting of the stepper.

Initialize the stateful component with a value from a data source.

Accept value: any numerical value.

Text Area / Text Field

A basic field for the user to input text. The Text Field is a single line and the text inside the field becomes scrollable horizontally if the user input exceeds the width of the field. The Text Area expands vertically as needed, making it better equipped for large amounts of user input.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree.

For Text Field, it defaults to Text Field.
For Text Area, it defaults to Text Area.

Field Name

The name of the value of the component used on the onChangeText function to log user input.

The value of this property is typically used when submitting data to an API using an HTTP POST request.

Appearance

Appearance of the area/field.

Available values: sold or underlined.

Auto Focus

When enabled, the keyboard will open as soon as the screen loads, and the input will immediately be ready to use.

Default Value

Default text to appear as the value of the component.

Disabled

When enabled, the user will not be able to input any text and the area/field will be grayed out.

Max Length

Allows you to set a maximum number of characters that can be entered into the input.

Placeholder Text

Placeholder text to display in the area/field when the user has not entered any text of their own.

Placeholder Text Color

Allows you to set the color of the placeholder text.

Password Input

When enabled, the user input is hidden on the screen and is displayed with '●'.

Assistive text

Helper text to be displayed underneath the area/field, useful for providing additional instructions.

Left icon name

The name of the icon selected from the icon picker to be displayed on the left.

Left icon mode

Allows you to select the placement of the left icon, if one is selected. Inset displays the icon inside the border of the area/field and outset displays the icon outside of the area/field.

Right icon name

The name of the icon selected from the icon picker to be displayed inset on the right.

Advanced Configuration

Property

Description

Allow Font Scaling

When enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings.

Auto Capitalize

This property is not supported by some keyboard types such as name-phone-pad.

Auto Correct

When enabled, Auto Correct will check what is being entered in the area/field.

Hide Caret

When enabled, the cursor in the text area/field will be hidden.

Hide Context Menu

When enabled, the context menu will become hidden.

Editable

Allows you to toggle if the text area/field is able to be used or not.

Keyboard Appearance

Determines the color of the keyboard.

Keyboard Type

Allows you to select the type of keyboard that will appear when the user focuses on the text area/field. Examples

Return Key Label

Android only alternative to Return Key Type.

Return Key Type

Allows you to select the type of return key the user will see.

Selection Color

Allows you to change the color of the highlight over selected text in the area/field.

Select Text on Focus

If enabled, all text will automatically be selected on focus.

Data

Property

Description

Initial Value

Initialize the stateful component with a value from a data source.

Label

The label of the area/field which is displayed directly above the area/field.

Error

When enabled, an outline matching the theme's defined Error color will appear around the field/area.

Must be a boolean value: true or false.

Date Picker

A field for the user to select a date.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Date Picker.

Field Name

The name of the value of the component is used on the onDateChange function to log user input.

It will be executed once the user has selected a date.

Mode

Allows you to select the mode of the date picker field.

Modes available: date, time, and datetime.

Assistive text

Helper text to be displayed underneath the picker, useful for providing additional instructions.

Locale

Allows changing of the locale of the component. By default, it uses the device's locale.

Minute Interval

The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30.

Time Zone Offset

Allows changing of the timeZone of the date picker. By default, it uses the device's time zone.

Disabled

When enabled, the date picker will be grayed out and the user will not be able to make a selection.

Left Icon Name

The name of the icon selected from the icon picker to be displayed on the left.

Left Icon Mode

Allows you to select the placement of the left icon, if one is selected. Inset displays the icon inside the border of the picker and outset displays the icon outside of the date picker border.

Right Icon Name

The name of the icon selected from the icon picker to be displayed on the right.

Appearance

Appearance of the date picker modal.

Available values: sold or underlined.

Data

Property

Description

Initial Value

Initialize the stateful component with a value from a data source.

Label

The label of the picker is displayed directly above the selected date.

Error

When enabled, an outline matching the theme's defined Error color will appear around the picker.

Must be a boolean value: true or false.

Picker

A field for the user to make a selection from a scrollable list of predefined options.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Picker.

Field name

Sets the name of the field in the onChange function that controls what happens when the user makes a selection.

Placeholder

Placeholder text to display in the picker when the user has not made a selection.

Placeholder Text Color

Allows you to set the color of the placeholder text.

Assistive Text

Helper text to be displayed underneath the picker, useful for providing additional instructions.

Disabled

When enabled, the picker will be grayed out and the user will not be able to make a selection.

Left Icon Name

The name of the icon selected from the icon picker to be displayed on the left.

Left Icon Mode

Allows you to select the placement of the left icon, if one is selected. Inset displays the icon inside the border of the picker and outset displays the icon outside of the picker border.

Right Icon Name

The name of the icon selected from the icon picker to be displayed inset on the right.

Appearance

Appearance of the picker modal.

Available values: sold or underlined.

Data

Property

Description

Initial Value

Initialize the stateful component with a value from a data source.

Label

The label of the picker which is displayed directly above the selected date.

Error

When enabled, an outline matching the theme's defined Error color will appear around the picker.

Must be a boolean value: true or false.

Options

Here you are able to add the list options you want to be displayed in the picker with each option separated by a comma.

The source of data can be static or remote (coming from a data source).

Additional Resources

React Native documentation on TextInput


Did this page help you?