Select Field

Live example

Properties

Name	Values	Default
label (required)	string
id (required)	string
value	string \| number \| readonly string[]
options	{value: string; label: string;}[]
onValueChange	((newValue: string \| undefined) => void)
'aria-invalid'	boolean \| "true" \| "false" \| "grammar" \| "spelling"
accepts all FieldProps	FieldProps see Properties section	affixWidth = 40
children	ReactNode
...	JSX.IntrinsicElements["input"]

Native version

Due to the specific nature of the select fields in the native environment, ElementNative has a slightly different implementation to the Web-SelectField


                                                        
                                                        
                                                            import { SelectField } from '@ovotech/element-native';
                                                        
                                                        <SelectField
                                                          hint="Hint message"
                                                          label="Select something"
                                                          onSelected={(selectedOption) => console.log('selected!', selectedOption)}
                                                          defaultSelected={{ label: 'Appliances', value: 'Appliances' }}
                                                          options={[
                                                            { label: 'Mobiles', value: 'Mobiles' },
                                                            { label: 'Appliances', value: 'Appliances' },
                                                            { label: 'Cameras', value: 'Cameras' },
                                                            { label: 'Computers', value: 'Computers' },
                                                            { label: 'Vegetables', value: 'Vegetables' },
                                                          ]}
                                                        />;

Native Properties

Name	Values	Default
defaultSelected	{ label: string; value: string; category?: string; }
options	Array< {label: string;value: string;category?: string;} >
noOptionMessage	string
hasError	boolean	false
onSelected	(value: {label: string;value: string;category?: string;}) => void
testID	string
…	Omit<FieldProps, 'children'>

Composition

Label text

Hint text

Input text

Input border

Chevron-down icon

Tokens
Text color	color.surface.onsurface
Hint text color	color.surface.onsurfacevariant
Input border color	input.color.border
Text font weight	font.family.bold
Hint text font weight	font.family.book
Text size	font.size.md
Text line height	font.lineheight.md
Padding	space.100 space.200
Input border width	border.width.md

Join the community

For the latest features, asking questions and seeing how people are using Element across OVO experiences, join our Slack channel.