Control group

A ControlGroup joins several form controls into one unit, such as a filter bar. Each child stays a separate control.

Control group or input group

An InputGroup is one control: a button inside it acts on that input only. When a button acts on several controls, put them in a ControlGroup.

Usage#

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

<ControlGroup>
  <HTMLSelect options={["Owner", "Status"]} />
  <InputGroup placeholder="Filter pipelines" />
  <Button icon="arrow-right" />
</ControlGroup>

Examples#

Filter bar#

Buttons, inputs, selects and numeric inputs sit side by side with a small gap. Give controls without a visible label an aria-label.

core/control-group/basic.tsx

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

export default function ControlGroupBasic() {
  return (
    <ControlGroup>
      <HTMLSelect aria-label="Filter field" options={["Owner", "Status", "Region", "Dataset"]} />
      <InputGroup aria-label="Filter value" leftIcon="filter" placeholder="Filter pipelines" />
      <Button aria-label="Apply filter" icon="arrow-right" />
    </ControlGroup>
  );
}

Fill#

fill stretches the group to its container and grows every child equally. Add Classes.FIXED to a child to keep its natural width.

core/control-group/fill.tsx

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

export default function ControlGroupFill() {
  return (
    <ControlGroup fill>
      <HTMLSelect aria-label="Region" className={Classes.FIXED} options={["All regions", "eu-west-1", "us-east-1"]} />
      <InputGroup aria-label="Search datasets" leftIcon="search" placeholder="Search 1,204 datasets" />
      <Button className={Classes.FIXED} intent="primary" text="Search" />
    </ControlGroup>
  );
}

Vertical#

vertical stacks the controls in a column.

core/control-group/vertical.tsx

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

export default function ControlGroupVertical() {
  return (
    <ControlGroup vertical style={{ width: 260 }}>
      <InputGroup aria-label="Dataset name" leftIcon="database" placeholder="Dataset name" />
      <HTMLSelect aria-label="Storage region" options={["eu-west-1", "us-east-1", "ap-southeast-2"]} />
      <Button intent="primary" text="Create dataset" />
    </ControlGroup>
  );
}

Props interface#

ControlGroup also accepts the HTML attributes of a <div>.

interface ControlGroupProps extends Props, HTMLDivProps, React.RefAttributes<HTMLDivElement>@clawscale/react

Props	Description
`children`	`React.ReactNode` Group contents.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`fill`	`boolean` = `false` Whether the control group should take up the full width of its container.
`vertical`	`boolean` = `false` Whether the control group should appear with vertical styling.