Inputs & Forms
Manage input group

InputGroup

The InputGroup component is a powerful tool for managing groups of InputCheckbox (opens in a new tab) or InputRadio (opens in a new tab) components, ensuring that labels and hints are properly rendered and that group name, required and disabled states are consistently applied. This enhances the overall user experience and accessibility of your forms.

Group API

Mandatory name prop is applied to all child inputs. There are also optional required adn disabled props, which are applied in the same manner.

💡️

For detailed examples, refer to the Storybook documentation (opens in a new tab).

Example with InputCheckbox

Allows multiple selection.

import {InputGroup, InputCheckbox} from 'koval-ui';
export default function Example() {
  return (
    <InputGroup
      name="demo-group"
      label="Group label"
      hint="This is hint">
      <InputCheckbox
        value="foo"
        label="This is a foo label"
        required />
      <InputCheckbox
        value="bar"
        label="This is a bar label" />
      <InputCheckbox
        value="bazz"
        label="This is a bazz label" />
    </InputGroup>
  );
};
Open on CodeSandboxOpen Sandbox

Example with InputRadio

Allows single selection.

import {InputGroup, InputRadio} from 'koval-ui';
export default function Example() {
  return (
    <InputGroup
      name="demo-group"
      label="Group label"
      hint="This is hint">
      <InputRadio
        value="foo"
        label="This is a foo label" />
      <InputRadio
        value="bar"
        label="This is a bar label" />
      <InputRadio
        value="bazz"
        label="This is a bazz label" />
    </InputGroup>
  );
};
Open on CodeSandboxOpen Sandbox
InputsForm and form field