Skip to content

select.mdx

Latest commit

 

History

History
184 lines (164 loc) · 4.49 KB

select.mdx

File metadata and controls

184 lines (164 loc) · 4.49 KB

import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";

Select

The Select component with collection of predefined options is used to pick a value.

Imports

import {
  Select,
  SelectBase,
  SelectPrefix,
  SelectSuffix,
  useSelectProps,
  useSelectState,
  SelectWrapper,
} from "@adaptui/react-tailwind";

<Nextra.Callout> A complex component that supports customization as per the composition guide. </Nextra.Callout>

Usage

<InteractiveCodeblock children={({ spreadProps }) => ` <Select ${spreadProps}>

Select anyone Dog Cat Hamster Parrot Spider Goldfish `} booleanProps={["disabled", "invalid", "loading"]} themeProps={{ variant: "select.variant", size: "select.size" }} />

Select Variants

Variants can be set using the variant prop. The default variant is outline. The available variants are: outline subtle underline & ghost

<Codeblock live code={`

Select anyone Dog Cat Hamster Select anyone Dog Cat Hamster Select anyone Dog Cat Hamster Select anyone Dog Cat Hamster
`} />

Select sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

<Codeblock live code={`

Select anyone Dog Cat Hamster Select anyone Dog Cat Hamster Select anyone Dog Cat Hamster Select anyone Dog Cat Hamster
`} />

Select Prefix

Comes only with prefix prop to append any content inside the Select. Also you can change the default suffix component aswell.

<Codeblock live code={`

}> Select anyone Dog Cat Hamster
`} />

API Reference

<PropsTable data={[ { name: "size", themeKey: "select.size", default: "md" }, { name: "variant", themeKey: "select.variant", default: "outline" }, { name: "disabled", type: "boolean", description: "If true, the Select will be disabled.", default: "false", }, { name: "invalid", type: "boolean", description: "True, if the value of the select is invalid.", default: "false", }, { name: "loading", type: "boolean", description: "True, if the select is loading.", default: "false", }, { name: "prefix", type: "React.ReactNode", description: "Prefix for the Select", }, { name: "suffix", type: "React.ReactNode", description: "Suffix for the Select", }, { name: "spinner", type: "React.ReactNode", description: "Spinner component to display when loading.", },

]} />