Skip to content

docs(material/radio): Update description for color input description on API page #29333

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.

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
merged 1 commit into from
Jun 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 2 additions & 12 deletions src/material/radio/radio.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,6 @@ Individual radio-buttons inside of a radio-group will inherit the `name` of the
`<mat-radio-group>` is compatible with `@angular/forms` and supports both `FormsModule`
and `ReactiveFormsModule`.

### Default Color Configuration
The default color for radio buttons can be configured globally using the `MAT_RADIO_DEFAULT_OPTIONS` provider

```
providers: [{
provide: MAT_RADIO_DEFAULT_OPTIONS,
useValue: { color: 'accent' },
}]
```

### Accessibility

`MatRadioButton` uses an internal `<input type="radio">` to provide an accessible experience.
Expand All @@ -56,7 +46,7 @@ should not use the `attr.` prefix when binding these properties, as demonstrated
```

Prefer placing all radio buttons inside of a `<mat-radio-group>` rather than creating standalone
radio buttons because groups are easier to use exclusively with a keyboard.
radio buttons because groups are easier to use exclusively with a keyboard.

You should provide an accessible label for all `<mat-radio-group>` elements via `aria-label` or
`aria-labelledby`.
`aria-labelledby`.
19 changes: 16 additions & 3 deletions src/material/radio/radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,13 @@ export const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = {
export const MAT_RADIO_GROUP = new InjectionToken<MatRadioGroup>('MatRadioGroup');

export interface MatRadioDefaultOptions {
/**
* Theme color of the radio button. This API is supported in M2 themes only, it
* has no effect in M3 themes.
*
* For information on applying color variants in M3, see
* https://material.angular.io/guide/theming#using-component-color-variants.
*/
color: ThemePalette;
}

Expand Down Expand Up @@ -481,11 +488,17 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
this._required = value;
}

/** Theme color of the radio button. */
/**
* Theme color of the radio button. This API is supported in M2 themes only, it
* has no effect in M3 themes.
*
* For information on applying color variants in M3, see
* https://material.angular.io/guide/theming#using-component-color-variants.
*/
@Input()
get color(): ThemePalette {
// As per Material design specifications the selection control radio should use the accent color
// palette by default. https://material.io/guidelines/components/selection-controls.html
// As per M2 design specifications the selection control radio should use the accent color
// palette by default. https://m2.material.io/components/radio-buttons#specs
return (
this._color ||
(this.radioGroup && this.radioGroup.color) ||
Expand Down
1 change: 0 additions & 1 deletion tools/public_api_guard/material/radio.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ export class MatRadioChange {

// @public (undocumented)
export interface MatRadioDefaultOptions {
// (undocumented)
color: ThemePalette;
}

Expand Down
Loading