HTML Select

Introduction

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.

Examples

Usage

HTMLSelect

import React from "react";
import { HTMLSelect } from "@commure/components-foundation";
function MyHTMLSelect() {
return (
<HTMLSelect
options={["Item A", "Item B", "Item C", "Item D"]}
fill
minimal={true}
/>
);
}
export default MyHTMLSelect;

API Reference

HTMLSelect

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