Group 10.17.4

ARIA

RTL

Combine different types of inputs into groups to save vertical space on your designs and also simplify form filling.

Default

"use client";

import { Group } from "@heathmont/moon-core-tw";

const Default = () => (
  <Group>
    <Group.FirstInput placeholder="First input" />
    <Group.LastInput placeholder="Last input" />
  </Group>
);

export default Default;

Direction

The optional direction property has a default value of vertical. To change the direction to horizontal, set its value to horizontal.

"use client";

import { Group } from "@heathmont/moon-core-tw";

const Direction = () => (
  <div className="flex flex-col xl:flex-row gap-6 justify-center items-center">
    <Group>
      <Group.FirstInput placeholder="First input" />
      <Group.LastInput placeholder="Last input" />
    </Group>
    <Group orientation="horizontal">
      <Group.FirstInput placeholder="First input" />
      <Group.LastInput placeholder="Last input" />
    </Group>
  </div>
);

export default Direction;

The Group component always comprises two sub-components: First and Last. As demonstrated in the examples below, it can be any combination of Input and Select, or InsetInput and InsetSelect sub-components. Internally, the Input and InsetInput sub-components serve as references to the Input and InsetInput components, respectively. The Select sub-component represent the NativeSelect component, while the InsetSelect sub-component is a reference to the InsetNativeSelect component. All props for the sub-components can be found on the corresponding reference component pages.

Last inset select

First inset select

First inset selectLast inset select

"use client";

import { Group } from "@heathmont/moon-core-tw";

const Options = () => (
  <div className="flex flex-col xl:flex-row gap-6 justify-center items-center">
    <div className="flex flex-col gap-6 justify-center items-justify">
      <Group orientation="horizontal">
        <Group.FirstInput placeholder="First input" />
        <Group.LastInput placeholder="Last input" />
      </Group>
      <Group orientation="horizontal">
        <Group.FirstInput placeholder="First input" />
        <Group.LastSelect>
          <option value="">Last select</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Group.LastSelect>
      </Group>
      <Group orientation="horizontal">
        <Group.FirstSelect>
          <option value="">First select</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Group.FirstSelect>
        <Group.LastInput placeholder="Last input" />
      </Group>
      <Group orientation="horizontal">
        <Group.FirstSelect>
          <option value="">First select</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Group.FirstSelect>
        <Group.LastSelect>
          <option value="">Last select</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Group.LastSelect>
      </Group>
    </div>
    <div className="flex flex-col gap-6 justify-center items-justify">
      <Group orientation="horizontal">
        <Group.FirstInsetInput placeholder="First inset input" />
        <Group.LastInsetInput placeholder="Last inset input" />
      </Group>
      <Group orientation="horizontal">
        <Group.FirstInsetInput placeholder="First inset input" />
        <Group.LastInsetSelect label="Last inset select">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Group.LastInsetSelect>
      </Group>
      <Group orientation="horizontal">
        <Group.FirstInsetSelect label="First inset select">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Group.FirstInsetSelect>
        <Group.LastInsetInput placeholder="Last inset input" />
      </Group>
      <Group orientation="horizontal">
        <Group.FirstInsetSelect label="First inset select">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Group.FirstInsetSelect>
        <Group.LastInsetSelect label="Last inset select">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Group.LastInsetSelect>
      </Group>
    </div>
  </div>
);

export default Options;

Size

The size property is optional for Group and defaults to md. You can modify the size using sm or lg values. While there is no xl size, you can utilize the FirstInsetInput and LastInsetInput sub-components, which exceed the dimensions of lg.

"use client";

import { Group } from "@heathmont/moon-core-tw";

const Size = () => (
  <div className="flex flex-col xl:flex-row gap-6 justify-center items-center">
    <Group size="sm">
      <Group.FirstInput placeholder="First input" />
      <Group.LastInput placeholder="Last input" />
    </Group>
    <Group>
      <Group.FirstInput placeholder="First input" />
      <Group.LastInput placeholder="Last input" />
    </Group>
    <Group size="lg">
      <Group.FirstInput placeholder="First input" />
      <Group.LastInput placeholder="Last input" />
    </Group>
    <Group>
      <Group.FirstInsetInput placeholder="First inset input" />
      <Group.LastInsetInput placeholder="Last inset input" />
    </Group>
  </div>
);

export default Size;

Different states

The Group component has three states: error, disabled, and readOnly. You can use these three boolean props to set the state of the Group. You can also set the state of each sub-component individually. If you need to add a Hint component, you will need to add proper states for it also.

Informative message

"use client";

import { Group, Hint } from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

const States = () => (
  <div className="flex flex-col lg:flex-row justify-around items-start w-full gap-2">
    <div>
      <Group error>
        <Group.FirstInput placeholder="First input" />
        <Group.LastInput placeholder="Last input" />
      </Group>
      <Hint error>
        <GenericInfo />
        Informative message
      </Hint>
      <Hint error>
        <GenericInfo />
        Informative message
      </Hint>
    </div>
    <div>
      <Group>
        <Group.FirstInput placeholder="First input" />
        <Group.LastInput placeholder="Last input" />
      </Group>
      <Hint error>
        <GenericInfo />
        Informative message
      </Hint>
    </div>
    <div>
      <Group disabled>
        <Group.FirstInput placeholder="First input" />
        <Group.LastInput placeholder="Last input" />
      </Group>
      <Hint disabled>Informative message</Hint>
    </div>
    <div>
      <Group readOnly>
        <Group.FirstInput placeholder="First input" />
        <Group.LastInput placeholder="Last input" />
      </Group>
      <Hint>Informative message</Hint>
    </div>
  </div>
);

export default States;

Group

These are props specific to the Group component:

Name	Type	Default
orientation	"vertical" \| "horizontal"	vertical
size	"sm" \| "md" \| "lg"	md
error	boolean	false
className	string	-