Select

The Select component is a dropdown menu that allows users to choose an option from a list. It supports multiple picker styles, enabling it to adapt to different design and functionality needs.

When the pickerType prop is set to native, the Select component leverages the default select interface of the underlying platform, whether it’s Android or iOS. This ensures a familiar, consistent, and reliable experience that adheres to the native design standards of each operating system.

For more tailored designs, the pickerType can be set to custom. In this mode, the component uses a default custom-designed picker interface provided by the Phaselis framework. This custom picker is highly configurable, allowing you to modify its appearance and behavior using a variety of additional props to match your application's unique style and functionality requirements.

Import

import { Select } from "phaselis";

Usage

Native Picker Usage

import { InputGroup, Select, required } from "phaselis";

const Example = () => {
  return (
    <InputGroup label="Native Select">
      <Select
        name="nativeSelect"
        leftIcon="Globe"
        size="md"
        validations={[required("This field is required")]}
        options={[
          { value: "usa", label: "USA" },
          { value: "canada", label: "Canada" },
          { value: "mexico", label: "Mexico" },
        ]}
        pickerType="native"
        placeholder="Select a country"
      />
    </InputGroup>
  );
};

export default Example;

Custom Picker (Default) Usage

import { InputGroup, Select, required } from "phaselis";

const Example = () => {
  return (
    <InputGroup label="Custom Select">
      <Select
        name="customDefault"
        leftIcon="ArrowRight"
        size="lg"
        validations={[required("Selection is required")]}
        options={[
          { value: "apple", label: "Apple" },
          { value: "banana", label: "Banana" },
          { value: "cherry", label: "Cherry" },
        ]}
        pickerType="custom"
        placeholder="Pick a fruit"
      />
    </InputGroup>
  );
};

export default Example;

Custom Picker with Customization

import { InputGroup, Select, Slot } from "phaselis";
import { Pressable, Text, TouchableOpacity, View } from "react-native";

const Example = () => {
  return (
    <InputGroup label="Custom Select with Customization">
      <Select
        name="customSelectWithSlots"
        leftIcon="User"
        size="md"
        pickerType="custom"
        options={[
          { value: "admin", label: "Admin" },
          { value: "editor", label: "Editor" },
          { value: "viewer", label: "Viewer" },
        ]}
        placeholder="Select a role"
        OptionSlot={({
          item,
          selectedItem,
          onChange,
          setShowPicker,
          closeOnSelect,
        }) => (
          <TouchableOpacity
            onPress={() => {
              onChange?.(null, item?.value, item);
              if (closeOnSelect) setShowPicker?.(false);
            }}
            style={{
              padding: 10,
              backgroundColor:
                selectedItem?.value === item?.value ? "#e0e0e0" : "transparent",
            }}
          >
            <Text>{item?.label}</Text>
          </TouchableOpacity>
        )}
        HeaderSlot={({ text, setShowPicker, closeIcon, closeIconSize }) => (
          <View style={{ padding: 15, backgroundColor: "#f0f0f0" }}>
            <Text style={{ fontSize: 18, fontWeight: "bold" }}>{text}</Text>
            <Pressable onPress={() => setShowPicker?.(false)}>
              <Slot icon={closeIcon} />
            </Pressable>
          </View>
        )}
        InputSlot={({
          selectedItem,
          placeholder,
          leftIcon,
          rightIcon,
          setShowPicker,
        }) => (
          <Pressable
            onPress={() => setShowPicker?.(true)}
            style={{
              flexDirection: "row",
              padding: 10,
              borderWidth: 1,
              borderColor: "#ccc",
              borderRadius: 5,
            }}
          >
            <Slot icon={leftIcon} size="md" />
            <Text style={{ flex: 1, paddingHorizontal: 10 }}>
              {selectedItem?.label || placeholder}
            </Text>
            <Slot icon={rightIcon} size="md" />
          </Pressable>
        )}
      />
    </InputGroup>
  );
};

export default Example;

Props

Common Props

These are the main props available to both native and custom picker types:

options required

Array<{ value: any; label: string; }>[]

An array of options to display in the picker. Each option should contain a value and label property.

<Select
  pickerType="native"
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
/>

onChange

(e: any, value?: any, data?: any) => any

A callback function triggered when the value changes. It receives the event object, the selected value, and optional data.

<Select
  pickerType="custom"
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
  onChange={(e, value) => console.log(value)}
/>

pickerType

native | custom

Defines the type of picker to use. native is for platform-specific pickers, while custom is for a customizable interface. Default is native.

<Select
  pickerType="native"
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
/>

style

Name	Type	Description
container	ViewStyle	Style for the outer container of the picker component.
element	TextStyle	Style for the text displayed in the input field or picker element.
leftSlot	ViewStyle	TextStyle
rightSlot	ViewStyle	TextStyle

You can style the picker using the style prop with ViewStyle and TextStyle for respective components.

<Select
  style={{ container: { padding: 10 }, element: { fontSize: 16 } }}
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
  pickerType="custom"
/>

You can style the picker with the style prop using either an object with named styles or directly provide TextStyle properties that will be applied to the element (text display).

// Object with named styles
<Select
  style={{
    container: { padding: 10 },
    element: { fontSize: 16, color: '#333' },
    leftSlot: { marginRight: 8 },
    rightSlot: { marginLeft: 8 }
  }}
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
  pickerType="custom"
/>

// Direct element styling
<Select
  style={{ fontSize: 16, fontWeight: 'bold', color: '#0066cc' }}
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
  pickerType="custom"
/>

containerStyle

ViewStyle

Additional style applied directly to the container element.

<Select
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
  containerStyle={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 8 }}
/>

elementStyle

TextStyle

Additional style applied directly to the text element.

<Select
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
  elementStyle={{ fontSize: 16, color: '#444', fontWeight: '500' }}
/>

leftSlotStyle

ViewStyle | TextStyle

Additional style applied directly to the left slot or icon.

<Select
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
  leftIcon="List"
  leftSlotStyle={{ color: '#0066cc', marginRight: 10 }}
/>

rightSlotStyle

ViewStyle | TextStyle

Additional style applied directly to the right slot or icon.

<Select
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
  ]}
  rightIcon="ChevronDown"
  rightSlotStyle={{ color: '#666', marginLeft: 10 }}
/>

size

ComponentSize

The size of the picker.

<Select
  pickerType="native"
  size="lg"
  options={[
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
  ]}
/>

selectedItem

any | undefined

The currently selected item from the options.

import { Text, TouchableOpacity } from "react-native";

<Select
  pickerType="custom"
  options={[
    { value: "admin", label: "Admin" },
    { value: "editor", label: "Editor" },
    { value: "viewer", label: "Viewer" },
  ]}
  OptionSlot={({ item, selectedItem, onChange }) => (
    <TouchableOpacity
      onPress={() => onChange?.(null, item?.value, item)}
      style={{
        padding: 10,
        backgroundColor:
          selectedItem?.value === item?.value ? "#e0e0e0" : "transparent",
      }}
    >
      <Text>{item?.label}</Text>
    </TouchableOpacity>
  )}
/>

disabled

boolean

A flag to disable the picker, preventing user interaction.

<Select
  pickerType="native"
  options={[
    { value: "admin", label: "Admin" },
    { value: "editor", label: "Editor" },
    { value: "viewer", label: "Viewer" },
  ]}
  disabled
/>

Native Picker Props

These are the additional props specifically available when the pickerType is set to "native":

placeholder

string

The placeholder text displayed when no value is selected in the native picker. This is used to prompt the user to make a selection.

<Select
  pickerType="native"
  options={[
    { value: "admin", label: "Admin" },
    { value: "editor", label: "Editor" },
    { value: "viewer", label: "Viewer" },
  ]}
  placeholder="Select a role"
/>

Custom Picker Props

These are the additional props specifically available when the pickerType is set to "custom":

setShowPicker

Dispatch<SetStateAction<boolean>>

A setter function to control the visibility of the picker. This function should be used to change the showPicker state.

import { Slot } from "phaselis";
import { Pressable, Text, View } from "react-native";

<Select
  pickerType="custom"
  options={[
    { value: "admin", label: "Admin" },
    { value: "editor", label: "Editor" },
    { value: "viewer", label: "Viewer" },
  ]}
  HeaderSlot={({ text, setShowPicker, closeIcon, closeIconSize }) => (
    <View style={{ padding: 15, backgroundColor: "#f0f0f0" }}>
      <Text style={{ fontSize: 18, fontWeight: "bold" }}>{text}</Text>
      <Pressable onPress={() => setShowPicker?.(false)}>
        <Slot icon={closeIcon} />
      </Pressable>
    </View>
  )}
/>

maxHeightModal

number | string

The maximum height of the modal where the picker is displayed. It can be a number or a string value (e.g., "50%", "400px") to control the size of the bottom sheet.

<Select pickerType="custom" options={[]} maxHeightModal={500} />

fullScreenModal

boolean

A flag to determine whether the modal should take up the full screen. If set to true, the picker will be displayed in full-screen mode.

<Select pickerType="custom" options={[]} fullScreenModal={true} />

HeaderSlot

ComponentType<HeaderSlotProps>

A slot component used to customize the header of the picker.

<Select pickerType="custom" options={[]} HeaderSlot={CustomHeaderSlot} />

closeIcon

SlotIconName

The name of the close icon to be displayed in the header of the picker. This is used in conjunction with HeaderSlot.

<Select pickerType="custom" options={[]} closeIcon="Close" />

closeIconSize

ComponentSize

The size of the close icon in the header.

<Select pickerType="custom" options={[]} closeIconSize="md" />

CloseIconSlot

ComponentType

A slot component used to customize the close icon in the header. If provided, this will replace the default close icon.

<Select pickerType="custom" options={[]} CloseIconSlot={CustomCloseIcon} />

OptionSlot

ComponentType<OptionSlotProps>

A slot component used to customize the rendering of each option in the picker.

<Select pickerType="custom" options={[]} OptionSlot={CustomOptionSlot} />

NoOptionSlot

ComponentType

A slot component used when there are no available options to display in the picker. You can customize what appears when there are no options.

<Select pickerType="custom" options={[]} NoOptionSlot={CustomNoOptionSlot} />

closeOnSelect

boolean

A flag that determines whether the picker should close automatically after an option is selected. When set to true, the picker will be closed immediately after an option is selected.

<Select pickerType="custom" options={[]} closeOnSelect={true} />

style

Name	Type	Description
container	ViewStyle	Style for the outer container of the picker component.
element	TextStyle	Style for the text displayed in the input field or picker element.
leftSlot	ViewStyle | TextStyle	Style for the component or icon on the left side of the picker.
rightSlot	ViewStyle | TextStyle	Style for the component or icon on the right side of the picker.

You can style the picker using the style prop with ViewStyle and TextStyle for respective components.

<Select
  pickerType="custom"
  options={[]}
  style={{ container: { padding: 10 }, element: { fontSize: 16 } }}
/>