Skip to content
Docs
Components
Inputs
Select

Select

Component to select an item between several options.

Import

import { Select, Option } from 'react-native-ficus-ui';

Usage

Single value selection

EDITABLE EXAMPLE
const SingleValue = () => {
  const [selectValue, setSelectedValue] = React.useState(null);
  const selectRef = React.createRef();

  return (
    <Box>
      <Button
        w={300}
        colorScheme="blue"
        onPress={() => {
          if (selectRef.current) {
            selectRef.current.open();
          }
        }}
      >
        {selectValue ? selectValue.toString() : 'Select'}
      </Button>

      <Select
        onSelect={setSelectedValue}
        ref={selectRef}
        value={selectValue}
        title="This is your title"
        mt="md"
        pb="2xl"
        message="This is the long message used to set some context"
        data={[1, 2, 3, 4, 5, 6]}
        renderItem={(item, index) => (
          <Option value={item} py="md" px="xl">
            <Text>Option {item}</Text>
          </Option>
        )}
      />
    </Box>
  );
}
render(<SingleValue />)

Multiple values selection

EDITABLE EXAMPLE
const MultiValue = () => {
  const [selectMultiValue, setSelectedMultiValue] = React.useState([]);
  const selectMultiRef = React.createRef();

  return (
    <Box>
      <Button
        w={300}
        colorScheme="orange"
        onPress={() => {
          if (selectMultiRef.current) {
            selectMultiRef.current.open();
          }
        }}
      >
        {selectMultiValue?.length ? selectMultiValue.toString() : 'Select'}
      </Button>

      <Select
        isMultiple
        onSelect={setSelectedMultiValue}
        ref={selectMultiRef}
        value={selectMultiValue}
        title="This is your title"
        mt="md"
        pb="2xl"
        message="This is the long message used to set some context"
        data={[1, 2, 3, 4, 5, 6]}
        renderItem={(item, index) => (
          <Option value={item} py="md" px="xl">
            <Text>Option {item}</Text>
          </Option>
        )}
      />
    </Box>
  );
}
render(<MultiValue />)

Single value selection with submit

EDITABLE EXAMPLE
const SubmitSelect = () => {
  const [selectSubmitValue, setSelectedSubmitValue] = React.useState(null);
  const selectSubmitRef = React.createRef();

  return (
    <Box>
      <Button
        w={300}
        colorScheme="red"
        onPress={() => {
          if (selectSubmitRef.current) {
            selectSubmitRef.current.open();
          }
        }}
      >
        {selectSubmitValue ? selectSubmitValue.toString() : 'Select'}
      </Button>

      <Select
        submit
        onSelect={setSelectedSubmitValue}
        ref={selectSubmitRef}
        value={selectSubmitValue}
        title="This is your title"
        mt="md"
        pb="2xl"
        message="This is the long message used to set some context"
        data={[1, 2, 3, 4, 5, 6]}
        renderItem={(item, index) => (
          <Option value={item} py="md" px="xl">
            <Text>Option {index}</Text>
          </Option>
        )}
      />
    </Box>
  );
}
render(<SubmitSelect />)

Props

Extends every Box props.

title

The title of select modal.

TypeRequired
stringReact.ReactNode

message

The text message (after title) of select modal.

TypeRequired
stringReact.ReactNode

data

The data array object with different options.

TypeRequired
any[]Yes

value

The value object of selection (array on single object, depends of isMultiple prop).

TypeRequired
anyYes

renderItem

The render function to render an option, you can use Option component inside it.

TypeRequired
(item: any, index: number) => React.ReactElementYes

keyExtractor

Method to extract an unique key for each option (the component is using a FlatList to display them).

TypeRequired
(item: any, index: number) => stringNo

showScrollIndicator

Boolean to indicate if the scroll indicator must be shown on options list.

TypeRequired
booleanNo

submit

Boolean indicating if we need a submit button to validate the selection.

TypeRequiredDefault
booleanNofalse

renderSubmitButton

Render function for submit button/component.

TypeRequired
() => React.ReactElementNo

onSelect

Method called when an option is selected/validated.

TypeRequired
(value: any) => voidNo

submitText

The text on submit button.

TypeRequired
stringNo

isMultiple

Boolean indicating if the user can select multiple options. When this option is enabled, the user must submit the selection.

TypeRequiredDefault
booleanNofalse