Label

The Label component is a standardized form element used to associate descriptive text with controls such as checkboxes and toggles. This component ensures accessibility and consistent styling for Malaysian government websites.

Auto-delete notifications

Enable 2FA security?

Source Storybook

Usage

import { Label } from "@govtechmy/myds-react/label";
import { Checkbox } from "@govtechmy/myds-react/checkbox";
import { Toggle, ToggleThumb } from "@govtechmy/myds-react/toggle";

export default () => (
  <>
    <div className="flex items-center justify-between">
      <Label htmlFor="checkbox">Auto-delete notifications</Label>
      <Checkbox id="checkbox"></Checkbox>
    </div>
    <div className="flex items-center justify-between">
      <Label htmlFor="toggle">Enable 2FA security?</Label>
      <Toggle id="toggle">
        <ToggleThumb />
      </Toggle>
    </div>
  </>
);