Select creates a dropdown list of items with the selected item in closed view.
const Example = () => {
let [service, setService] = React.useState("");
return <VStack alignItems="center" space={4}>
<Select shadow={2} selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
bg: "teal.600",
endIcon: <CheckIcon size="5" />
}} _light={{
bg: "coolGray.100"
}} _dark={{
bg: "coolGray.800"
}} onValueChange={itemValue => setService(itemValue)}>
<Select.Item shadow={2} label="UX Research" value="ux" />
<Select.Item shadow={2} label="Web Development" value="web" />
<Select.Item shadow={2} label="Cross Platform Development" value="cross" />
<Select.Item shadow={2} label="UI Designing" value="ui" />
<Select.Item shadow={2} label="Backend Development" value="backend" />
</Select>
</VStack>;
};
import { Select } from "native-base";
const Example = () => {
let [service, setService] = React.useState("");
return <Center>
<Box w="3/4" maxW="300">
<Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
bg: "teal.600",
endIcon: <CheckIcon size="5" />
}} mt={1} onValueChange={itemValue => setService(itemValue)}>
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
<Select.Item label="Cross Platform Development" value="cross" />
<Select.Item label="UI Designing" value="ui" />
<Select.Item label="Backend Development" value="backend" />
</Select>
</Box>
</Center>;
};
const Example = () => {
return <Center>
<FormControl w="3/4" maxW="300" isRequired isInvalid>
<FormControl.Label>Choose service</FormControl.Label>
<Select minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
bg: "teal.600",
endIcon: <CheckIcon size={5} />
}} mt="1">
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
<Select.Item label="Cross Platform Development" value="cross" />
<Select.Item label="UI Designing" value="ui" />
<Select.Item label="Backend Development" value="backend" />
</Select>
<FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
Please make a selection!
</FormControl.ErrorMessage>
</FormControl>
</Center>;
};
Select implements
,
,
,
,
,
,
,
,
SelectItem implements
,
,
,
,
,
,
,
,
,
,
The label which will be displayed.
The value to be used for the item. This is the value that will be returned on form submission.
NativeBase ships with a default theme for each component. Checkout the default theme of select
.
Info:
We can easily extend the select component theme using extendTheme function as described in the documentation .use native variant. Accessibility improvements on styled variant is in-progress.
