Skip to content

Allow React Components as label in RadioControl Options for Enhanced Customization #66603

@retrofox

Description

@retrofox

In some cases, we'd like to pass not only a string to the label property of the options item.
Consider the following one:

<RadioControl
  options={[
    {
      label: <Rating value={ 4 } />
      value: '4'
    },
    //...
  ]}
  // ...
/>

...to render something like...

Image

Questions:

  1. Should the label accept a React Component Instead of a String?

Allowing label to accept a React component could enable richer, more flexible user interfaces. This would be particularly useful for custom icons, rating displays, or other visual indicators.

  1. Accessibility Concerns

Labels in RadioControl are simple strings, which are generally straightforward to manage for screen readers. Allowing components might introduce accessibility issues. How can we deal with the a11y?

So, I'd like your opinion on addressing this issue before I start digging into a tentative implementation.

cc @WordPress/gutenberg-components

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions