Fields

Components that can be used to log user input

Description

Date Picker

A scrollable field for the user to select a date.

Configuration

Parameter

Description

Selected date

The selected date of the picker

Error

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

Label

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

Options

The range of dates that will be available for the user to choose from.

Disabled

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

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

Left Icon Name

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

Picker onDateChange function

The onDateChange function that will be executed once the user has selected a date.

Assistive text

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

Right Icon Name

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

Search Bar

A basic search bar.

Configuration

Parameter

Description

Icon

The name of the icon selected from the icon picker to be used as the button.

Field name

Sets the name of the field in the onSubmit function that controls what happens when the user submits a query.

Placeholder

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

Checkbox Field

A basic checkbox with a title that can be toggled between a selected and unselected state.

Configuration

Parameter

Description

Color

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

Title

Text to be displayed to the right of the checkbox.

Disabled

Removes checkbox functionality and grays out the outline of the box.

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 checkbox fields on a screen, make sure to assign each one a different Field name. Without doing so, all checkboxes will be toggled by a single user interaction.

Picker

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

Configuration

Parameter

Description

Error

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

Label

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

Options

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

Disabled

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

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.

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.

Left Icon Name

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

Assistive Text

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

Right Icon Name

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

Resources

React Native Docs
Expo Docs

Slider Field

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

Configuration

Parameter

Description

Step

Set the increment/decrement of the value.

Disabled

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

Field Name

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

Maximum Value

Maximum value of the slider.

Minimum Value

Minimum value of the slider.

Resources

Expo Docs

Stepper

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

Configuration

Parameter

Description

Default Starting Value

The initial value of the stepper.

Stepper onPlus Function

The function to be executed when the user pressed the "+", or increments the stepper.

Stepper onMinus Function

The function to be executed when the user presses the "-", or decrements the stepper.

Radio Button Field

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

Configuration

Parameter

Description

Title

Text to be displayed to the right of the checkbox.

Disabled

Grays out the radio button and removes functionality.

Selected

Toggle between displaying a selected and unselected state.

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

Parameter

Description

Error

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

Label

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

Disabled

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

Field name

The name of the value of the component to be used in the onChange function used to log user input.

Placeholder

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

Keyboard Type

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

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.

Left icon name

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

Assistive text

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

Right icon name

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

Password Field (Text Field Only)

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


Did this page help you?