Select Group

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

import type { ReactNode } from "react";
import { useId } from "react";

export type SelectGroupDirection = "row" | "column";

export interface SelectGroupProps {
  label?: string;
  children: ReactNode;
  direction?: SelectGroupDirection;
  className?: string;
}

function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}

/**
 * Layout wrapper that arranges multiple related selects into a consistent
 * group. Renders a semantic <fieldset>/<legend> (the group label) and lays
 * its children out in a row (responsive grid) or column with a shared gap.
 * It does NOT reimplement the select itself — children are expected to be
 * select (or other field) components passed by the consumer.
 */
export function SelectGroup({
  label = "Group",
  children,
  direction = "column",
  className,
}: SelectGroupProps) {
  const generatedId = useId();
  const legendId = `select-group-${generatedId}-legend`;

  return (
    <fieldset
      aria-labelledby={legendId}
      className={cx(
        "min-w-0 rounded-[var(--ds-radius-md)] border border-[var(--ds-color-border)] bg-[var(--ds-color-surface)] p-4 motion-reduce:transition-none",
        className,
      )}
    >
      {label ? (
        <legend
          id={legendId}
          className="mb-3 px-1 text-[13px] font-medium leading-5 text-[var(--ds-color-foreground)]"
        >
          {label}
        </legend>
      ) : null}
      <div
        className={cx(
          direction === "row"
            ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
            : "flex flex-col gap-4",
        )}
      >
        {children}
      </div>
    </fieldset>
  );
}

export default SelectGroup;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/* DevSnips React — JavaScript parity build.
 * Same API, behavior, and classes as code.tsx; TypeScript types removed.
 * Regenerated from code.tsx — edit code.tsx and re-run the generator.
 */

import { useId } from "react";
function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}
export function SelectGroup({
  label = "Group",
  children,
  direction = "column",
  className
}) {
  const generatedId = useId();
  const legendId = `select-group-${generatedId}-legend`;
  return <fieldset
    aria-labelledby={legendId}
    className={cx(
      "min-w-0 rounded-[var(--ds-radius-md)] border border-[var(--ds-color-border)] bg-[var(--ds-color-surface)] p-4 motion-reduce:transition-none",
      className
    )}
  >
      {label ? <legend
    id={legendId}
    className="mb-3 px-1 text-[13px] font-medium leading-5 text-[var(--ds-color-foreground)]"
  >
          {label}
        </legend> : null}
      <div
    className={cx(
      direction === "row" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" : "flex flex-col gap-4"
    )}
  >
        {children}
      </div>
    </fieldset>;
}

export default SelectGroup;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# Select Group

Layout wrapper that groups multiple related selects with consistent spacing.

## Usage

```tsx
import { SelectGroup } from './code';

<SelectGroup label="Location"><Select .../><Select .../></SelectGroup>
```

## JavaScript

A `code.jsx` build is provided for projects that ship plain JSX. It exposes the same API and behavior as `code.tsx` — only the TypeScript types are removed.

```jsx
import { SelectGroup } from './code';

<SelectGroup label="Location"><Select .../><Select .../></SelectGroup>
```

## Props

| Name | Type | Default | Description |
|---|---|---:|---|
| `label` | `string` | `"Group"` | Group legend. |
| `children` | `ReactNode` | — | The selects to lay out. |
| `direction` | `"row" \| "column"` | `"column"` | Layout direction. |
| `className` | `string` | — | Extra classes. |

## Behavior

Renders a semantic `<fieldset><legend>` and arranges child selects in a column (`flex-col gap-4`) or responsive row grid (`grid gap-4`, 1 to 2 to 3 cols). It does NOT reimplement the select — it is a layout wrapper.

## Accessibility

`<fieldset><legend>` provides an accessible group label for the contained controls.

## Styling

Built with React, Tailwind CSS, and DevSnips design tokens. The component consumes the `--ds-*` semantic tokens via arbitrary values (for example `bg-[var(--ds-color-input)]`). Define the tokens once in your theme — no component-specific CSS file is required.

## Design Tokens

See [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the authoritative token specification. This select uses the semantic color, radius, spacing, and motion tokens.

## Notes

Use to keep alignment and spacing consistent across related selects (e.g. Country / Region / City).