| Name | Type | Description | Default | |
|---|---|---|---|---|
| ariaLabel | string | Specifies a string to be used as the name for the select element when no label is provided. | 'Select' | |
| defaultValue | string | string[] | Initial value of the select, only when it is uncontrolled. | - | |
| disabled | boolean | If true, the component will be disabled. | false | |
New enableSelectAll | boolean | Enables users to select multiple items from the list. | false | |
| error | string | If it is a defined value and also a truthy string, the component will change its appearance, showing the error below the select component. If the defined value is an empty string, it will reserve a space below the component for a future error, but it would not change its look. In case of being undefined or null, both the appearance and the space for the error message would not be modified. | - | |
| helperText | string | Helper text to be placed above the select. | - | |
| label | string | Text to be placed above the select. | - | |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - | |
| multiple | boolean | If true, the select component will support multiple selected options. In that case, value will be an array of strings with each selected option value. | false | |
| name | string | Name attribute of the input element. This attribute will allow users to find the component's value during the submit event. In this event, the component's value will always be a regular string, for both single and multiple selection modes, being a single option value in the first case and more than one value when multiple selection is available, separated by commas. | - | |
| onBlur | (val: { value: string | string[]; error?: string }) => void | This function will be called when the select loses the focus. An object including the value (or values) and the error (if the value selected is not valid) will be passed to this function. If there is no error, error will not be defined. | - | |
| onChange | (val: { value: string | string[]; error?: string }) => void | This function will be called when the user selects an option. An object including the new value (or values) and the error (if the value selected is not valid) will be passed to this function. If there is no error, error will not be defined. | - | |
| optional | boolean | If true, the select will be optional, showing '(Optional)' next to the label and adding a default first option with an empty string as value and the placeholder (if defined) as its label. Otherwise, the field will be considered required and an error will be passed as a parameter to the onBlur and onChange functions if an option wasn't selected. | false | |
Required options | Option[] | ({ label: string, options: Option[] })[]being {
label: string;
value: string;
icon: string | Icon;
}and React.ReactNode & React.SVGProps<SVGSVGElement> | An array of objects representing the selectable options. Each object has the following properties depending on whether it is a regular option or a group: Option
You can't mix single and grouped options in the same array. | - | |
| placeholder | string | Text to be put as placeholder of the select. | - | |
| searchable | boolean | If true, enables search functionality. | false | |
New searchByStartsWith | boolean | Defines the search mode when searchable is true. If true, matches options that start with the search text. If false, matches options that contain the search text anywhere in their label. | false | |
| size | 'small' | 'medium' | 'large' | 'fillParent' | Size of the component. | 'medium' | |
| tabIndex | number | Value of the tabindex attribute. | 0 | |
| ref | React.Ref<HTMLDivElement> | Reference to the component. | - | |
| value | string | string[] | Value of the select. If undefined, the component will be uncontrolled and the value will be managed internally by the component. | - | |
New virtualizedHeight | string | A fixed height must be set to enable virtualization. If no height is provided, the select will automatically adjust to the height of its content, and virtualization will not be applied. | - |
() => { const [value, setValue] = useState(""); const onChange = ({ value }) => { setValue(value); }; const onBlur = ({ value, error }) => { setValue(value); }; const options = [ { label: "Madrid", value: "madrid" }, { label: "Melbourne", value: "melbourne" }, { label: "London", value: "london" }, { label: "Roma", value: "roma" }, ]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcSelect label="Select your favorite city" placeholder="Choose a city" options={options} value={value} onBlur={onBlur} onChange={onChange} /> </DxcInset> ); }
() => { const selectRef = useRef(); const handleSubmit = () => { const select = selectRef.current.getElementsByTagName("input")[0]; console.log(select.value); }; const options = [ { label: "Madrid", value: "madrid" }, { label: "Melbourne", value: "melbourne" }, { label: "London", value: "london" }, { label: "Roma", value: "roma" }, ]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex direction="column" gap="var(--spacing-gap-xl)" alignItems="flex-start"> <DxcSelect label="Select your favorite city" placeholder="Choose a city" defaultValue="madrid" options={options} ref={selectRef} /> <DxcButton onClick={handleSubmit} label="Submit" /> </DxcFlex> </DxcInset> ); }
() => { const options = [ ...Array.from({ length: 10000 }, (_, i) => ({ label: `Option ${String(i + 1).padStart(2, "0")}`, value: `${i + 1}`, })), ]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcSelect label="Select a virtualized value" options={options} virtualizedHeight="300px" /> </DxcInset> ); }
() => { const [value, setValue] = useState(""); const [error, setError] = useState(); const onChange = ({ value }) => { setValue(value); }; const onBlur = ({ value, error }) => { setValue(value); setError(error); }; const options = [ { label: "Madrid", value: "madrid" }, { label: "Melbourne", value: "melbourne" }, { label: "London", value: "london" }, { label: "Roma", value: "roma" }, ]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcSelect label="Select your favorite city" placeholder="Choose a city" options={options} value={value} onBlur={onBlur} onChange={onChange} error={error == undefined ? "" : error} /> </DxcInset> ); }
() => { const options = [ { label: "Designers", options: [ { label: "Lara", value: "lara" }, { label: "Irene", value: "irene" } ], }, { label: "Developers", options: [ { label: "Jairo", value: "jairo" }, { label: "Enrique", value: "enrique" }, { label: "Jiale", value: "jiale" }, { label: "Iván", value: "ivan" } ], }, { label: "Managers", options: [ { label: "Aitor", value: "aitor" }, { label: "Raquel", value: "Raquel" } ], }, ]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcSelect label="Select your coworkers" placeholder="Choose a colleague" options={options} multiple /> </DxcInset> ); }
() => { const options_material = [ { label: "Transport", options: [ { label: "Electric Car", value: "car", icon: "electric_car", }, { label: "Motorcycle", value: "motorcycle", icon: "Motorcycle", }, { label: "Train", value: "train", icon: "train", }, { label: "Bike", value: "bike", icon: "pedal_bike", }, ], }, { label: "Entertainment", options: [ { label: "Movie", value: "movie", icon: "movie", }, { label: "Music", value: "music", icon: "music_note", }, { label: "Games", value: "games", icon: "joystick", }, ], }, ]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcSelect label="Select your favourite hobbies" placeholder="Choose your hobbies" options={options_material} multiple enableSelectAll /> </DxcInset> ); }