web component Radio and RadioGroup spec #26900

brianchristopherbrady · 2023-02-17T21:59:57Z

Radio

Radio buttons allow users to select a single option from two or more choices. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.

Design Spec

Link to Radio Design Spec in Figma

Engineering Spec

Fluent WC3 Radio is a form associated component that extends from the FAST Radio FAST Radio and is intended to be as close to the Fluent UI React 9 Menu implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.

Use Case

Used anywhere an author might otherwise use an input[type="radio"]. Used to facilitate choice where only one choice is acceptable.

Class: `Radio`

Component Name

fluent-radio

Variables

Fields

Name	Privacy	Type	Default	Description
`name`	public	`string`		The name of the radio. See name attribute for more info.
`disabled`	public	`boolean`		Sets disabled state for radio
`labelPosition`	public	`"after"` `"below"`	`"below"`	The position of the label relative to the radio indicator.
`checked`	public	`boolean`	`false`	When true, radio button will be checked

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`templateChanged`	public			`void`	FoundationElement
`stylesChanged`	public			`void`	FoundationElement

Events

Name	Type	Inherited From
`change`

Attributes

Name	Field
`name`	name
`disabled`	disabled
`label-position`	labelPosition
`checked`	checked

Slots

Name	Description
`checked-indicator`	The checked indicator
	Default slotted content for label text

Suggested Template

radioTemplate from FastFoundation

Accessibility

W3 Radio Spec

WAI-ARIA Roles, States, and Properties

Attributes	value	Description
`role`	`radio`
`aria-checked`		the checked state of the component
`aria-required`		the required state of the component
`aria-disabled`		the disabled state of the component
`tabindex`	`0`

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
`<Radio>`	`<fluent-radio>`

Property Mapping

Fluent UI React 9	Fluent Web Components 3	Description of difference
`prop label`	default slotted content	React implementation requires user to pass a string through the `label` prop on the Radio component The web component implementation requires users to pass the label text through the default slotted content

Radio Group

RadioGroup lets people select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space. For more than 5 choices, consider using a different component such as Dropdown.

Design Spec

Link to Radio Design Spec in Figma

Engineering Spec

A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one of the buttons before moving past a certain point in the workflow.

Use Case

Radio group allows the user to be presented with a list of all the options visible which can facilitate the comparison of choice.

Class: `RadioGroup`

Component Name

fluent-radio-group

Fields

Name	Privacy	Type	Default	Description
`disabled`	public	`boolean`	`false`	Disables the radio group and child radios.
`name`	public	`string`		The name of the radio group. Setting this value will set the name value for all child radio elements.
`value`	public	`string`		The value of the checked radio.
`orientation`	public	`horizontal \| vertical`	`horizontal`	The orientation of the group
`childItems`	public	`HTMLElement[]`		The orientation of the group

Methods

Name	Privacy	Return
`nameChanged`	protected	`void`
`valueChanged`	protected	`void`
`templateChanged`	protected	`void`
`stylesChanged`	protected	`void`

Events

Name	Type	Description
`change`		Fires a custom 'change' event when the value changes

Attributes

Name	Field	Inherited From
`disabled`	disabled
`named`	name
`value`	value
`orientation`	orientation

Slots

Name	Description
	The default slotted content
label	Provide label for the radio group

Suggested Template

radioGroupTemplate from FastFoundation

Accessibility

W3 Radio Spec

WAI-ARIA Roles, States, and Properties

Attributes	value	Description
`aria-labelledby`		used to associate a label with the group

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
`<RadioGroup>`	`<fluent-radio-group>`

Property Mapping

Fluent UI React 9	Fluent Web Components 3	Description of difference
`layout`	`orientation`	React implementation requires user to pass either `"horizontal"` or `"horizontal-stacked"` through `layout` prop. WC3 implementation requires user to either pass `"vertical"` or "`horizontal"` through `orientation` attribute.

fabricteam · 2023-02-17T22:06:49Z

📊 Bundle size report

_{🤖 This report was generated against f8d5e364067660db4ab0f161ad288257ff38efa4}

size-auditor · 2023-02-17T22:13:02Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: f8d5e364067660db4ab0f161ad288257ff38efa4 (build)

codesandbox-ci · 2023-02-17T22:16:47Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 82a3673:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

chrisdholt · 2023-02-17T22:39:16Z

packages/web-components/src/radio/README.md

@@ -0,0 +1,122 @@
+# Radio


We should couple RadioGroup along with this I think. If the goal is to leverage the FAST implementation, those two go hand in hand since we implement non-native inputs. All the behavior is in RadioGroup as of now.

chrisdholt · 2023-02-17T23:32:14Z

packages/web-components/src/radio/README.md

+
+| Name            | Privacy | Type                | Default   | Description                                                                                                                                                                              |
+| --------------- | ------- | ------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `readOnly`      | public  | `boolean`           |           | When true, the control will be immutable by user interaction. See readonly [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. |


This is likely getting removed, we can validate, but I think it's the right move: microsoft/fast#6438

chrisdholt · 2023-02-21T23:21:43Z

packages/web-components/src/radio-group/README.md

@@ -0,0 +1,127 @@
+# Radio Group
+
+> RadioGroup lets people select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space. For more than 5 choices, consider using a different component such as Dropdown.


Dropdown may not exist here, let's update this to not suggest using components we don't have or know will exist :).

chrisdholt · 2023-02-21T23:24:05Z

packages/web-components/src/radio-group/README.md

+
+## **Engineering Spec**
+
+A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one of the buttons before moving past a certain point in the workflow.


Let's denote that this is a quote from the W3C, without that, it's written in a way where I might mistake that these should be built with buttons, which is inaccurate as the roles are different.

chrisdholt · 2023-02-21T23:25:54Z

packages/web-components/src/radio-group/README.md

+
+### Use Case
+
+Radio group allows the user to be presented with a list of all the options visible which can facilitate the comparison of choice.


Does this accurately describe use cases?

chrisdholt · 2023-02-21T23:26:45Z

packages/web-components/src/radio-group/README.md

+| `name`        | public  | `string`                 |              | The name of the radio group. Setting this value will set the name value for all child radio elements. |
+| `value`       | public  | `string`                 |              | The value of the checked radio.                                                                       |
+| `orientation` | public  | `horizontal \| vertical` | `horizontal` | The orientation of the group                                                                          |
+| `childItems`  | public  | `HTMLElement[]`          |              | The orientation of the group                                                                          |


What is childItems? This looks copied over, but I think this is internals... if you were to pass a property of childItems I don't think it works. IIRC, you slot the items in the default slot.

chrisdholt · 2023-02-21T23:27:09Z

packages/web-components/src/radio-group/README.md

+| `templateChanged` | protected |             |            | `void` |                |
+| `stylesChanged`   | protected |             |            | `void` |                |


Do these really exist?

chrisdholt · 2023-02-21T23:28:05Z

packages/web-components/src/radio-group/README.md

+
+| Name  | Description                       |
+| ----- | --------------------------------- |
+|       | The default slotted content       |


These aren't default slotted content - this is the default slot which expects radios

chrisdholt · 2023-02-21T23:28:36Z

packages/web-components/src/radio-group/README.md

+
+## **Accessibility**
+
+[W3 Radio Spec](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role)


https://www.w3.org/WAI/ARIA/apg/patterns/radio/

chrisdholt · 2023-02-23T20:14:14Z

packages/web-components/src/radio-group/README.md

+**Property Mapping**
+| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
+|-------------------|------------------------ |---------------------------|
+| `layout` | `orientation` | React implementation requires user to pass either `"horizontal"` or `"horizontal-stacked"` through `layout` prop. <br /> WC3 implementation requires user to either pass `"vertical"` or "`horizontal"` through `orientation` attribute.


Curious of @miroslavstastny's thoughts here, but I'm not sure that layout and orientation are necessarily 1:1. I do think that it probably overlaps in terms of use case though with aria-orientation being set/updated with a change to layout. It seems like there are a couple ways we can go here...we can add a layout attribute with these values and do some aliasing to make sure if orientation isn't updated it gets updated with a change to layout, we can have a slightly different implementation where we have a boolean stacked attribute which would stack the radios (we can choose to apply only to horizontal), or we can do something else.

I think this is outstanding but everything else seems reasonable to me

chrisdholt · 2023-02-23T20:16:01Z

packages/web-components/src/radio/README.md

+**Property Mapping**
+| Fluent UI React 9 | Fluent Web Components 3 | Description of difference |
+|-------------------|------------------------ |---------------------------|
+| `prop label` | default slotted content | React implementation requires user to pass a string through the `label` prop on the Radio component <br /><br /> The web component implementation requires users to pass the label text through the default slotted content


nit, technically it's not required to pass the text for the label via the default slot; you could pass an aria-label or use aria-labelledby to associate it with an element outside it's slot...but the slot is the primary place where the label would go.

chrisdholt · 2023-03-01T05:23:48Z

packages/web-components/src/radio-group/README.md

+| `nameChanged`  | protected |             |            | `void` |                |
+| `valueChanged` | protected |             |            | `void` |                |


just a note that while not enumerated, each attr includes a [attribute]Changed() callback 👍

…adio-spec

…thub.com/microsoft/fluentui into user/brianbrady/web-component-radio-spec

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radio spec init

33bc7a4

brianchristopherbrady requested a review from a team as a code owner February 17, 2023 21:59

msft-fluent-ui-bot added the web-components label Feb 17, 2023

msft-fluent-ui-bot assigned micahgodbolt Feb 17, 2023

updates radio spec formatting

7f6309d

chrisdholt reviewed Feb 17, 2023

View reviewed changes

brianchristopherbrady added 2 commits February 21, 2023 11:10

adds radio group spec

efdd10e

updates radio specs

da9c784

micahgodbolt removed their assignment Feb 21, 2023

brianchristopherbrady changed the title ~~web component radio spec~~ web component Radio and RadioGroup spec Feb 21, 2023

brianchristopherbrady requested a review from chrisdholt February 21, 2023 23:18

chrisdholt reviewed Feb 21, 2023

View reviewed changes

updates spec

f1944cd

brianchristopherbrady requested a review from chrisdholt February 22, 2023 21:39

chrisdholt reviewed Feb 23, 2023

View reviewed changes

chrisdholt reviewed Mar 1, 2023

View reviewed changes

chrisdholt approved these changes Mar 1, 2023

View reviewed changes

brianchristopherbrady and others added 2 commits March 2, 2023 09:54

Merge branch 'web-components-v3' into user/brianbrady/web-component-r…

9f425c9

…adio-spec

yarn change

ea775f3

Merge branch 'user/brianbrady/web-component-radio-spec' of https://gi…

82a3673

…thub.com/microsoft/fluentui into user/brianbrady/web-component-radio-spec

brianchristopherbrady merged commit 9ae2455 into web-components-v3 Mar 2, 2023

brianchristopherbrady deleted the user/brianbrady/web-component-radio-spec branch March 2, 2023 19:00

chrisdholt pushed a commit that referenced this pull request Apr 29, 2024

web component Radio and RadioGroup spec (#26900)

cb7f1c7

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 29, 2024

web component Radio and RadioGroup spec (microsoft#26900)

5542d7b

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 29, 2024

web component Radio and RadioGroup spec (microsoft#26900)

546e0a6

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit to radium-v/fluentui that referenced this pull request Apr 30, 2024

web component Radio and RadioGroup spec (microsoft#26900)

03c7a85

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request Apr 30, 2024

web component Radio and RadioGroup spec (#26900)

dd262df

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request May 2, 2024

web component Radio and RadioGroup spec (#26900)

0749f8a

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request May 2, 2024

web component Radio and RadioGroup spec (#26900)

33fb361

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request May 2, 2024

web component Radio and RadioGroup spec (#26900)

f1cadba

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request May 3, 2024

web component Radio and RadioGroup spec (#26900)

42a9580

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request May 6, 2024

web component Radio and RadioGroup spec (#26900)

0bcab57

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request May 6, 2024

web component Radio and RadioGroup spec (#26900)

621b181

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request May 8, 2024

web component Radio and RadioGroup spec (#26900)

dddc64f

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

radium-v pushed a commit that referenced this pull request May 10, 2024

web component Radio and RadioGroup spec (#26900)

2410855

* radio spec init * updates radio spec formatting * adds radio group spec * updates radio specs * updates spec * yarn change

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

web component Radio and RadioGroup spec #26900

web component Radio and RadioGroup spec #26900

brianchristopherbrady commented Feb 17, 2023 •

edited

Loading

fabricteam commented Feb 17, 2023 •

edited

Loading

size-auditor bot commented Feb 17, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 17, 2023 •

edited

Loading

chrisdholt Feb 17, 2023

chrisdholt Feb 17, 2023

chrisdholt Feb 21, 2023

chrisdholt Feb 21, 2023

chrisdholt Feb 21, 2023

chrisdholt Feb 21, 2023

chrisdholt Feb 21, 2023

chrisdholt Feb 21, 2023

chrisdholt Feb 21, 2023

chrisdholt Feb 23, 2023

chrisdholt Mar 1, 2023

chrisdholt Feb 23, 2023

chrisdholt Mar 1, 2023

		@@ -0,0 +1,127 @@
		# Radio Group

		> RadioGroup lets people select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space. For more than 5 choices, consider using a different component such as Dropdown.


		## Engineering Spec

		A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one of the buttons before moving past a certain point in the workflow.


		### Use Case

		Radio group allows the user to be presented with a list of all the options visible which can facilitate the comparison of choice.

		\| `templateChanged` \| protected \| \| \| `void` \| \|
		\| `stylesChanged` \| protected \| \| \| `void` \| \|


		## Accessibility

		[W3 Radio Spec](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role)

		\| `nameChanged` \| protected \| \| \| `void` \| \|
		\| `valueChanged` \| protected \| \| \| `void` \| \|

web component Radio and RadioGroup spec #26900

web component Radio and RadioGroup spec #26900

Conversation

brianchristopherbrady commented Feb 17, 2023 • edited Loading

Radio

Design Spec

Engineering Spec

Use Case

Class: Radio

Component Name

Variables

Fields

Methods

Events

Attributes

Slots

Suggested Template

Accessibility

WAI-ARIA Roles, States, and Properties

Preparation

Fluent Web Component v3 v.s Fluent React 9

Radio Group

Design Spec

Engineering Spec

Use Case

Class: RadioGroup

Component Name

Fields

Methods

Events

Attributes

Slots

Suggested Template

Accessibility

WAI-ARIA Roles, States, and Properties

Preparation

Fluent Web Component v3 v.s Fluent React 9

fabricteam commented Feb 17, 2023 • edited Loading

📊 Bundle size report

size-auditor bot commented Feb 17, 2023 • edited Loading

Asset size changes

codesandbox-ci bot commented Feb 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brianchristopherbrady commented Feb 17, 2023 •

edited

Loading

Class: `Radio`

Class: `RadioGroup`

fabricteam commented Feb 17, 2023 •

edited

Loading

size-auditor bot commented Feb 17, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 17, 2023 •

edited

Loading