Usage

Import

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

Single Select

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

    return <Select initialValue={items[0]} items={items}/>
}
() => {
    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

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

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

    return <Select 
        value={value}
        onSelect={setValue}
        items={selectUsers}
        />
}
() => {
    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

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

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

    return <Select 
        showSearch
        value={value}
        onSelect={setValue}
        items={selectUsers}
        />
}
() => {
    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