Files
melpike af65282522 Align helper text with checkbox/radio labels (#49977)
Moves changes from #49920 to `main`.

Originally targeting `docs-v4.91.0` — retargeted to this branch.

**Related:** #49920

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved checkbox and radio button helper-text alignment so it lines
up with the associated label.
* Adjusted spacing between controls, labels, and helper text for a
cleaner form layout.

* **Documentation**
* Added component examples demonstrating checkbox and radio buttons with
helper text.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-27 08:07:54 -06:00

43 lines
801 B
TypeScript

import React from "react";
import { Meta, StoryObj } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import Checkbox from ".";
const meta: Meta<typeof Checkbox> = {
component: Checkbox,
title: "Components/FormFields/Checkbox",
argTypes: {
value: {
control: "boolean",
},
variant: {
control: "select",
options: ["default", "danger"],
},
},
};
export default meta;
type Story = StoryObj<typeof Checkbox>;
export const Basic: Story = {
args: {
onChange: action("onChange"),
},
};
export const WithLabel: Story = {
args: {
children: <b>Label</b>,
},
};
export const WithHelpText: Story = {
args: {
children: <b>Label</b>,
helpText: "This is some helper text that should align with the label.",
},
};