Skip to content

fix(pds-radio): add contained variant and image slot #562

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
QuintonJason merged 8 commits into from
Oct 22, 2025
Merged

fix(pds-radio): add contained variant and image slot #562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9883943
fix(pds-radio): add bordered variant docs and tests
QuintonJason Sep 17, 2025
e441e5e
fix: add image slot
QuintonJason Oct 20, 2025
f39b2e1
chore: self review
QuintonJason Oct 20, 2025
a2e202a
chore: add keys to array children for linter
QuintonJason Oct 21, 2025
0158f02
docs: remove image url refs
QuintonJason Oct 21, 2025
0538153
style: ensure image container borders render in invalid and hover states
QuintonJason Oct 22, 2025
5b2a981
fix: make image slot detection reactive to slot changes
QuintonJason Oct 22, 2025
0f0c1f5
docs: add image radio story
QuintonJason Oct 22, 2025
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
12 changes: 11 additions & 1 deletion libs/core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1380,6 +1380,11 @@ export namespace Components {
* Displays error message text describing an invalid state.
*/
"errorMessage": string;
/**
* Adds a border around the radio component for better visual separation.
* @defaultValue false
*/
"hasBorder": boolean;
/**
* Displays helper message text below radio.
*/
Expand Down Expand Up @@ -3990,6 +3995,11 @@ declare namespace LocalJSX {
* Displays error message text describing an invalid state.
*/
"errorMessage"?: string;
/**
* Adds a border around the radio component for better visual separation.
* @defaultValue false
*/
"hasBorder"?: boolean;
/**
* Displays helper message text below radio.
*/
Expand All @@ -4012,7 +4022,7 @@ declare namespace LocalJSX {
*/
"name"?: string;
/**
* Emits a boolean indicating whether the checkbox is currently checked or unchecked.
* Emits a boolean indicating whether the radio is currently checked or unchecked.
*/
"onPdsRadioChange"?: (event: PdsRadioCustomEvent<boolean>) => void;
/**
Expand Down
179 changes: 179 additions & 0 deletions libs/core/src/components/pds-radio/docs/pds-radio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,17 @@ An optional error message can provide further instructions, displayed independen
<pds-radio component-id="invalid" label="Label" invalid error-message="This is a short error message"></pds-radio>
</DocCanvas>

### With Border

Add a border around the radio component for better visual separation, useful for card-like layouts or when radios need more visual emphasis.

<DocCanvas client:only mdxSource={{
react: `<PdsRadio componentId="border" label="Label" hasBorder={true} helperMessage="This radio has enhanced visual separation" />`,
webComponent: `<pds-radio component-id="border" label="Label" has-border helper-message="This radio has enhanced visual separation"></pds-radio>`
}}>
<pds-radio component-id="border" label="Label" has-border helper-message="This radio has enhanced visual separation"></pds-radio>
</DocCanvas>

### Group

A radio group is created by assigning the same `name` attribute to each radio.
Expand All @@ -108,6 +119,174 @@ Only one radio in the group can be selected at a time.
</>
</DocCanvas>

### Group with Border

Radio groups can also use borders for enhanced visual organization, particularly useful in forms or selection interfaces.

<DocCanvas client:only mdxSource={{
react: `<PdsBox gap="sm">
<PdsRadio componentId="bordered1" label="Option 1" name="bordered-radio" checked={true} hasBorder={true} />
<PdsRadio componentId="bordered2" label="Option 2" name="bordered-radio" hasBorder={true} />
<PdsRadio componentId="bordered3" label="Option 3" name="bordered-radio" hasBorder={true} />
</PdsBox>
`,
webComponent: `<pds-box gap="sm">
<pds-radio component-id="bordered1" label="Option 1" name="bordered-radio" checked has-border></pds-radio>
<pds-radio component-id="bordered2" label="Option 2" name="bordered-radio" has-border></pds-radio>
<pds-radio component-id="bordered3" label="Option 3" name="bordered-radio" has-border></pds-radio>
</pds-box>
`}}>
<pds-box gap="sm">
<pds-radio component-id="bordered1" label="Option 1" name="bordered-radio" checked has-border></pds-radio>
<pds-radio component-id="bordered2" label="Option 2" name="bordered-radio" has-border></pds-radio>
<pds-radio component-id="bordered3" label="Option 3" name="bordered-radio" has-border></pds-radio>
</pds-box>
</DocCanvas>

### With Image

Radio buttons can display custom images instead of the default radio input in a bordered card layout. The image replaces the visual radio button while maintaining all functionality and accessibility features.

**Note:** Images must be provided via the `image` slot.

<DocCanvas client:only mdxSource={{
react: `<PdsRadio
componentId="image-radio"
label="Profile Picture"
helperMessage="Select your profile avatar">
<PdsBox slot="image" backgroundColor="var(--pine-color-accent)" borderRadius="full" padding="sm">
<PdsIcon icon="danger" size="medium" color="var(--pine-color-white)" />
</PdsBox>
</PdsRadio>`,
webComponent: `<pds-radio
component-id="image-radio"
label="Profile Picture"
helper-message="Select your profile avatar">
<pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
<pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
</pds-box>
</pds-radio>`
}}>
<pds-radio
component-id="image-radio"
label="Profile Picture"
helper-message="Select your profile avatar">
<pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
<pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
</pds-box>
</pds-radio>
</DocCanvas>

### Image Group

Image-based radios work seamlessly in groups with the same bordered card layout, showing visual selection feedback with border highlights and checkmark overlays.

<DocCanvas client:only mdxSource={{
react: `<PdsBox gap="sm">
<PdsRadio
componentId="avatar1"
label="John Doe"
name="avatar-selection"
value="john"
checked={true}
helperMessage="Senior Developer"
>
<PdsBox slot="image" backgroundColor="var(--pine-color-accent)" borderRadius="full" padding="sm">
<PdsIcon icon="danger" size="medium" color="var(--pine-color-white)" />
</PdsBox>
</PdsRadio>
<PdsRadio
componentId="avatar2"
label="Jane Smith"
name="avatar-selection"
value="jane"
helperMessage="Product Manager"
>
<PdsBox slot="image" backgroundColor="var(--pine-color-accent)" borderRadius="full" padding="sm">
<PdsIcon icon="danger" size="medium" color="var(--pine-color-white)" />
</PdsBox>
</PdsRadio>
<PdsRadio
componentId="avatar3"
label="Mike Johnson"
name="avatar-selection"
value="mike"
helperMessage="UX Designer"
>
<PdsBox slot="image" backgroundColor="var(--pine-color-accent)" borderRadius="full" padding="sm">
<PdsIcon icon="danger" size="medium" color="var(--pine-color-white)" />
</PdsBox>
</PdsRadio>
</PdsBox>`,
webComponent: `<pds-box gap="sm">
<pds-radio
component-id="avatar1"
label="John Doe"
name="avatar-selection"
value="john"
checked
helper-message="Senior Developer">
<pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
<pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
</pds-box>
</pds-radio>
<pds-radio
component-id="avatar2"
label="Jane Smith"
name="avatar-selection"
value="jane"
helper-message="Product Manager">
<pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
<pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
</pds-box>
</pds-radio>
<pds-radio
component-id="avatar3"
label="Mike Johnson"
name="avatar-selection"
value="mike"
helper-message="UX Designer">
<pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
<pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
</pds-box>
</pds-radio>
</pds-box>`
}}>
<pds-box gap="sm">
<pds-radio
component-id="avatar1"
label="John Doe"
name="avatar-selection"
value="john"
checked
helper-message="Senior Developer">
<pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
<pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
</pds-box>
</pds-radio>
<pds-radio
component-id="avatar2"
label="Jane Smith"
name="avatar-selection"
value="jane"
helper-message="Product Manager">
<pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
<pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
</pds-box>
</pds-radio>
<pds-radio
component-id="avatar3"
label="Mike Johnson"
name="avatar-selection"
value="mike"
helper-message="UX Designer">
<pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
<pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
</pds-box>
</pds-radio>
</pds-box>
</DocCanvas>

## Additional Resources

[MDN Web Docs: Radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
Loading
Loading