Skip to content

docs(storybook): Render Label examples within a usa-form for USWDS intended styling #3518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandonlenz merged 2 commits into from
Jun 24, 2026
+10 −5
Merged

docs(storybook): Render Label examples within a usa-form for USWDS intended styling #3518

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac0dded
Render Label examples within usa-form for USWDS intended styling
brandonlenz Jun 22, 2026
4b84101
Merge branch 'main' into 2866-fix-storybook-label-styles
brandonlenz Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions src/components/forms/Label/Label.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import { Label } from './Label'
import type { Meta, StoryObj } from '@storybook/react-vite'
import { Form } from '../Form/Form'

const meta = {
title: 'Components/Form elements/Label',
Expand All @@ -17,6 +18,11 @@ Source: https://designsystem.digital.gov/components/form-controls/
},
},
args: { htmlFor: 'testInput', children: 'Text input' },
render: (args) => (
<Form onSubmit={() => {}}>
<Label {...args} />
</Form>
),
} satisfies Meta<typeof Label>

export default meta
Expand All @@ -35,11 +41,10 @@ export const Error: Story = {
}

export const WithHint: Story = {
render: (args) => (
<Label {...args} htmlFor="testInputHint" hint={<> (optional)</>}>
Text input
</Label>
),
args: {
htmlFor: 'testInputHint',
hint: <> (optional)</>,
},
}

export const WithRequiredMarker: Story = {
Expand Down
Loading