Usage

Import

import { Select } from '@passfort/castle'
content_copy
Copy

Single Select

function Example() {
  const items = [
    {
      label: 'Alex W.',
      id: 'rmc',
    },
    {
      label: 'Stephen N.',
      id: 'uxd',
    },
    {
      label: 'David K.',
      id: 'hux',
    },
  ]

  return <Select initialValue={items[0]} items={items} />
}
function Example() {
  const items = [
    {
      label: 'Alex W.',
      id: 'rmc',
    },
    {
      label: 'Stephen N.',
      id: 'uxd',
    },
    {
      label: 'David K.',
      id: 'hux',
    },
  ]

  return <Select initialValue={items[0]} items={items} />
}
content_copy
Copy
live example

Controlled Single Select

function Example() {
  const [value, setValue] = React.useState()

  React.useEffect(() => {
    console.log('value', value)
  }, [value])

  return <Select value={value} onSelect={setValue} items={selectUsers} />
}
function Example() {
  const [value, setValue] = React.useState()

  React.useEffect(() => {
    console.log('value', value)
  }, [value])

  return <Select value={value} onSelect={setValue} items={selectUsers} />
}
content_copy
Copy
live example

Search Select

<Select
  showSearch
  items={selectUsers}
  onSelect={(item) => console.log('item', item)}
/>
<Select
  showSearch
  items={selectUsers}
  onSelect={(item) => console.log('item', item)}
/>
content_copy
Copy
live example

Controlled

function Example() {
  const [value, setValue] = React.useState()

  React.useEffect(() => {
    console.log('value', value)
  }, [value])

  return (
    <Select showSearch value={value} onSelect={setValue} items={selectUsers} />
  )
}
function Example() {
  const [value, setValue] = React.useState()

  React.useEffect(() => {
    console.log('value', value)
  }, [value])

  return (
    <Select showSearch value={value} onSelect={setValue} items={selectUsers} />
  )
}
content_copy
Copy
live example

FormControl

<FormControls>
  <FormControl isDisabled>
    <FormLabel>Search</FormLabel>
    <Select showSearch items={selectUsers} />
  </FormControl>
  <FormControl isDisabled>
    <FormLabel>Single</FormLabel>
    <Select items={selectUsers} />
  </FormControl>
</FormControls>
<FormControls>
  <FormControl isDisabled>
    <FormLabel>Search</FormLabel>
    <Select showSearch items={selectUsers} />
  </FormControl>
  <FormControl isDisabled>
    <FormLabel>Single</FormLabel>
    <Select items={selectUsers} />
  </FormControl>
</FormControls>
content_copy
Copy
live example