DropdownField

Import

import { DropdownField } from "react-sheikah-ui";

Usage

Input fields allow users to enter text. These components usually used in forms and dialogs.

import { DropdownField } from "react-sheikah-ui";

const options = [
  {
    label: 'Mighty Lynel Spear',
    value: 'Mighty Lynel Spear',
  },
  {
    label: 'Royal Broadsword',
    value: 'Royal Broadsword',
  },
  {
    label: 'Korok Leaf',
    value: 'Korok Leaf',
  },
  {
    label: 'Lightscale Trident',
    value: 'Lightscale Trident',
  },
],

<DropdownField
  label={'Weapon of Choice'}
  helperText={'Weapon that you will bring to the battle'}
  errorText={'There has been an error in this input'}
  isError={false}
  options={options}
  onChange={() => { ... }}
/>

<DropdownField
  label={'Backup Weapon'}
  helperText={'Backup should main weapon is broken'}
  errorText={'This weapon is too weak'}
  isError={true}
  containerStyle={{ marginTop: '1rem' }}
  options={[
    {
      label: 'Korok Leaf',
      value: 'Korok Leaf',
    }
  ]}
/>

Available Props

label

The label of the input field

options

Array of object containing the options for the dropdown

helperText

Optional Helper text below the input field for instruction how or what to fill in the field.

isError

Optional A flag to trigger error state displayed

errorText

Optional The description text below the input field to explain what causes the field to return an error state

containerStyle

Optional Standard style object applied to the whole container of this component. Use style instead if you want to specifically style the input box.

Other default standard input props

Other than the props defined above, this component accepts all standard props for HTML input component.