HTML select

HTMLSelect styles a native <select>. Use it for short, fixed lists. Use Select when users need to search or the items need custom rendering.

Usage#

import { HTMLSelect } from "@clawscale/react";

<HTMLSelect options={["eu-west-1", "us-east-1"]} value={region} onChange={(event) => setRegion(event.currentTarget.value)} />

Examples#

Options#

options takes strings, numbers or { label, value } objects. You can pass <option> children instead. Control the value with value and onChange.

Region

core/html-select/basic.tsx

import { FormGroup, HTMLSelect } from "@clawscale/react";

const REGIONS = [
  { label: "US East (N. Virginia)", value: "us-east-1" },
  { label: "Europe (Ireland)", value: "eu-west-1" },
  { label: "Asia Pacific (Sydney)", value: "ap-southeast-2" },
];

export default function HTMLSelectBasic() {
  return (
    <FormGroup label="Region" labelFor="html-select-region">
      <HTMLSelect defaultValue="eu-west-1" id="html-select-region" options={REGIONS} />
    </FormGroup>
  );
}

Fill#

fill stretches the select to the width of its container.

Source dataset

core/html-select/fill.tsx

import { FormGroup, HTMLSelect } from "@clawscale/react";

const DATASETS = ["orders_daily", "customer_profiles", "events_raw", "inventory_snapshots"];

export default function HTMLSelectFill() {
  return (
    <FormGroup label="Source dataset" labelFor="html-select-dataset">
      <HTMLSelect fill id="html-select-dataset" options={DATASETS} />
    </FormGroup>
  );
}

Minimal#

minimal removes the border and background. Use it in toolbars. iconName="caret-down" swaps the default icon.

core/html-select/minimal.tsx

import { HTMLSelect } from "@clawscale/react";

export default function HTMLSelectMinimal() {
  return (
    <>
      <HTMLSelect aria-label="Sort by" minimal options={["Last run", "Name", "Duration", "Failure rate"]} />
      <HTMLSelect
        aria-label="Group by"
        iconName="caret-down"
        minimal
        options={["No grouping", "Owner", "Region", "Status"]}
      />
    </>
  );
}

Disabled#

disabled blocks the select and dims it.

core/html-select/disabled.tsx

import { HTMLSelect } from "@clawscale/react";

export default function HTMLSelectDisabled() {
  return <HTMLSelect aria-label="Warehouse" disabled options={["analytics-xl", "etl-medium", "adhoc-small"]} />;
}

Size#

large matches the height of large buttons and inputs.

core/html-select/large.tsx

import { Button, HTMLSelect } from "@clawscale/react";

export default function HTMLSelectLarge() {
  return (
    <>
      <HTMLSelect aria-label="Environment" large options={["production", "staging", "development"]} />
      <Button intent="primary" size="large" text="Deploy" />
    </>
  );
}

Props interface#

HTMLSelect also accepts the HTML attributes of a <select>. It does not support multiple.

interface HTMLSelectProps extends React.RefAttributes<HTMLSelectElement>, React.SelectHTMLAttributes<HTMLSelectElement>@clawscale/react

Props	Description
`children`	`React.ReactNode`
`disabled`	`boolean` Whether this element is non-interactive.
`fill`	`boolean` Whether this element should fill its container.
`iconName`	`HTMLSelectIconName` = `"double-caret-vertical"` Name of one of the supported icons for this component to display on the right side of the element.
`iconProps`	`Partial<SVGIconProps>` Props to spread to the icon element displayed on the right side of the element.
`large`	`boolean` Whether to use large styles.
`minimal`	`boolean` Whether to use minimal styles.
`multiple`	`never` Multiple select is not supported.
`onChange`	`React.ChangeEventHandler<HTMLSelectElement>` Change event handler. Use `event.currentTarget.value` to access the new value.
`options`	`ReadonlyArray<string \| number \| OptionProps>` 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.
`placeholder`	`string` Placeholder text to display when no option is selected.
`value`	`string \| number` Controlled value of this component.