select.md

Select

Adapt UI provides one theme for Select components with four styles and seven interaction states.

Simple Usage

import { Select } from "@adaptui/react-native-tailwind";

const themes: ItemData[] = [
  { value: "system", label: "System" },
  { value: "dark", label: "Dark" },
  { value: "light", label: "Light" },
];

export default function App() {
  return <Select options={themes} placeholder="Select theme" />;
}

Working Preview

The Select component uses Gorhom's React Native Bottomsheet to list the options you have provided through options prop.

Wrap your app or the screen you are using the <Select/> component with <BottomSheetModalProvider> from
"@gorhom/bottom-sheet"

...
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
...

...

  return (
    <BottomSheetModalProvider>
        // Your App or the Select Component 
    </BottomSheetModalProvider>
  )
...

It uses useControllableState hook internally from chakra-ui to manage the state.

Table of Contents

• Themes
• Variant
• Size
• Prefix
• Options
• Props

Themes

Adapt UI provides only one base theme. You can add more themes by adding new variants and new design tokens if needed.

Usage

import { Select, useTheme } from "@adaptui/react-native-tailwind"

export default function App() { 
  const tailwind = useTheme(); 
  return (
    <>
      <Select
        style={tailwind.style("w-60")}
        variant="subtle"
        size="xl"
        placeholder="Select a payment mode"
      />
    </> 
  ) 
}

Variant

Adapt UI provides four select component styles: outline, subtle, underline, and ghost. You can use these various styled select components based on the necessity and style you wish to provide to your design.

Usage

import { Select, useTheme } from "@adaptui/react-native-tailwind"

export default function App() {
  const tailwind = useTheme();
  return (
    <>
     <Select placeholder="Select a payment mode" />;
     <Select variant="subtle" placeholder="Select theme" />;
     <Select variant="underline" placeholder="Select an option" />;
     <Select variant="ghost" placeholder="Toggle list" />;

    </>
  )
}

Size

There are four different sizes for select components in Adapt UI. Based on your requirement, you can switch between different sizes.

Usage

import { Select, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Select size="sm" placeholder="Select gender" /> 
      <Select placeholder="Select gender" />
      <Select size="lg" placeholder="Select gender" />
      <Select size="xl" placeholder="Select gender" />
    </>
  );
}

Prefix

The prefix is a slot at the beginning or prefix position of a component. Here in the select, the prefix slot can be used to bring icons. Prefix itself doesn't have any unique property.

Here in the select, we have an icon in the prefix slot. You can change the icon by passing an component to prefix prop.

Usage

import { Select, useTheme, DefaultUser, Calendar, Icon } from "@adaptui/react-native-tailwind";

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Select size="xl" placeholder="Pick a date" prefix={<Icon icon={<Calendar />} />}  />
      <Select size="xl" placeholder="Select user" prefix={<Icon icon={<DefaultUser />} />} />
    </>
  );
}

Options

The Select component accepts an options array. Which is a list of items to be displayed inside the BottomSheet.

It is of type

export type ItemData = { value: string; disabled?: boolean; label: string };

You will have to get your list something like this

  const options: ItemData[] = [
    {
      value: "apple",
      label: "Apple",
    },
    {
      value: "orange",
      label: "Orange",
    }
  ]

If you want to disable a item. You will have to pass the disabled key as true to the object.

  const options: ItemData[] = [
    {
      value: "apple",
      label: "Apple",
    },
    {
      value: "strawberry",
      label: "Strawberry",
      disabled: true
    }
  ]

Props

Select implements Touchable accepting all PressableProps

Name	Description	Type	Default
options	The Select Component options, which is rendered inside the Bottomsheet	ItemData[]*
defaultState	Default value of Select when it is uncontrolled	string
state	Value of Select when it is controlled	string
onStateChange	Callback called with the new value when it changes	(val: string) => void
placeholder	Default placeholder valye	string	"Select option"
size	How large should the select be?	sm, md, lg, xl	md
variant	How the select should look?	outline, subtle, underline , ghost	outline
prefix	Prefix for the Select.	RenderPropType	null
suffix	Suffix for the Select.	RenderPropType	null
invalid	Set to True, if the value of the Select is invalid.	boolean	false
disabled	Set to True, if the value of the Select is disabled.	boolean	false
snapPoints	Bottomsheet Snap points	string[]	["50%"]