Usage

Import

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

Single SelectV1

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

  return <SelectV1 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 <SelectV1 initialValue={items[0]} items={items} />
}
content_copy
Copy
live example

Controlled Single SelectV1

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

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

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

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

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

Search SelectV1

<SelectV1
  showSearch
  items={selectUsers}
  onSelect={(item) => console.log('item', item)}
/>
<SelectV1
  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 (
    <SelectV1
      showSearch
      value={value}
      onSelect={setValue}
      items={selectUsers}
    />
  )
}
function Example() {
  const [value, setValue] = React.useState()

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

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

FormControl

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