HTML Select


Styling HTML <select> tags requires a wrapper element to customize the drop-down caret, so we provide an HTMLSelect component to streamline this process.

Use HTMLSelect exactly like you would use a native <select> with value (or defaultValue) and onChange. Options can be passed as <option> children for full flexibility or via the options prop for simple shorthand.




1import React from "react";
2import { HTMLSelect } from "@commure/components-foundation";
4function MyHTMLSelect() {
5 return (
6 <HTMLSelect
7 options={["Item A", "Item B", "Item C", "Item D"]}
8 fill
9 minimal={true}
10 />
11 );
14export default MyHTMLSelect;

API Reference


Prop NameRequired?TypeDescription
disabledfalsebooleanWhether this element is non-interactive.
elementReffalse(ref: HTMLSelectElement | null) => voidRef handler to access the instance of the internal HTML element.
fillfalsebooleanWhether this element should fill its container.
iconPropsfalsePartial<IIconProps>Props to spread to the `<Icon>` element.
largefalsebooleanWhether to use large styles.
minimalfalsebooleanWhether to use minimal styles.
multiplefalseneverMultiple select is not supported.
onChangefalseReact.ChangeEventHandler<HTMLSelectElement>Change event handler. Use `event.currentTarget.value` to access the new value.
optionsfalseArray<string | number | IOptionProps>Shorthand for supplying options: an array of basic types or `{ label?, value }` objects. If no `label` is supplied, `value` will be used as the label.
valuefalsestring | numberControlled value of this component.

Related Reading

Blueprint Reference