() => { const options = [ { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const defaultOption = options[0]; const [option, setOption] = useState(defaultOption) return ( <Select label="Film" hint="Choose your favorite film" options={options} value={option.value} onChange={(option) => setOption(option)} /> ) }
() => { const options = [ { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { type: 'divider' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const defaultOption = options[0]; const [option, setOption] = useState(defaultOption) return ( <Select label="Film" hint="Choose your favorite film" options={options} value={option.value} onChange={(option) => setOption(option)} /> ) }
() => { const options = Object.values(demoFilmsObject).map((film, index) => { return { value: film.name, content: film.name, groupTitle: film.company, } }) const defaultOption = options[0]; const [option, setOption] = useState(defaultOption) return ( <Stack gap="s"> <Select triggerVariant="box" options={options} value={option.value} onChange={(option) => setOption(option)} /> <Select triggerVariant="text" options={options} value={option.value} onChange={(option) => setOption(option)} menuWidth="240px" /> </Stack> ) }
() => { const options = Object.values(demoFilmsObject).map((film, index) => { return { value: film.name, content: film.name, groupTitle: film.company, } }) const defaultOption = options[0]; const [option, setOption] = useState(defaultOption) return ( <Stack gap="s"> <Select options={options} value={option.value} onChange={(option) => setOption(option)} trigger={({ props }) => <Select.Trigger variant="text">{props.children}</Select.Trigger>} /> <Select options={options} value={option.value} onChange={(option) => setOption(option)} trigger={({ props }) => <Button>{props.children}</Button>} /> </Stack> ) }
() => { const options = [ { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const defaultOptions = [ options[0], options[1], ] const [multiSelectedOptions, setMultiSelectedOptions] = React.useState(defaultOptions); return ( <Select options={options} value={multiSelectedOptions.map(option => option.value)} onChange={setMultiSelectedOptions} allowMultiple trigger={({ props }) => <Select.Trigger>{props.children}</Select.Trigger>} /> ) }
() => { const options = [ { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const defaultOption = options[0]; const [option, setOption] = useState(defaultOption) const sharedProps = { options: options, value: option.value, onChange: (option) => setOption(option), } return ( <Arrange gap="s"> <Select menuPlacement="bottomStart" menuWidth="fit-content" {...sharedProps} /> <Select menuPlacement="bottomEnd" menuWidth="320px" {...sharedProps} /> <Select menuPlacement="topStart" menuWidth="fit-content" {...sharedProps} /> <Select menuPlacement="topEnd" menuWidth="320px" {...sharedProps} /> </Arrange> ) }
Use the menuItemsHaveEllipsis
to disable ellipsis on menu items
() => { const options = [ { value: 'Neopan 100 Acros', content: demoText.l }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const defaultOption = options[0]; const [option, setOption] = useState(defaultOption) return ( <Select label="Film" options={options} value={option.value} onChange={(option) => setOption(option)} menuItemsHaveEllipsis={false} /> ) }
Use the allowMultiple
prop to enable multiple selection
() => { const options = [ { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const defaultOptions = [ options[0], options[1], ] const [multiSelectedOptions, setMultiSelectedOptions] = React.useState(defaultOptions); return ( <Select label="Films" options={options} value={multiSelectedOptions.map(option => option.value)} onChange={setMultiSelectedOptions} allowMultiple /> ) }
() => { const options = [ { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const [option, setOption] = useState(); return ( <Select label="Film" hint="Choose your favorite film" options={options} value={option && option.value} onChange={(option) => setOption(option)} placeholder="Choose an option" /> ) }
() => { const options = [{ value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }]; const [option, setOption] = useState(options[0]) return ( <Select label="Film" options={options} value={option.value} onChange={(option) => setOption(option)} isDisabled /> ) }
() => { const options = [ { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const defaultOption = options[0]; const [option, setOption] = useState(defaultOption) return ( <Box padding="l2" backgroundColor="background2" borderSide="all" radius="m"> <Select label="Film" hint="Choose your favorite film" options={options} value={option.value} onChange={(option) => setOption(option)} backgroundColor="background" /> </Box> ) }
() => { const options = [ { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }, { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' }, { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' }, ]; const defaultOption = options[0]; const [option, setOption] = useState(defaultOption) return ( <Select label="Film" options={options} value={option.value} onChange={(option) => setOption(option)} onClear={(option) => setOption({})} placeholder="Choose an option" /> ) }