diff --git a/docs/angular/src/content/en/components/general/cli/component-templates.mdx b/docs/angular/src/content/en/components/general/cli/component-templates.mdx index f36297e414..d073cce00c 100644 --- a/docs/angular/src/content/en/components/general/cli/component-templates.mdx +++ b/docs/angular/src/content/en/components/general/cli/component-templates.mdx @@ -64,7 +64,7 @@ These templates generate components into an existing Angular workspace only. The | badge | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c badge newBadge
Ignite UI CLI:
ig add badge newBadge
Basic IgxBadge sample.
| [IgxBadge](../../inputs/badge.mdx) displaying a status indicator. | | button-group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c button-group newButtonGroup
Ignite UI CLI:
ig add button-group newButtonGroup
Basic IgxButtonGroup sample.
| [IgxButtonGroup](../../inputs/button-group.mdx) with a set of toggle buttons. | | checkbox | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c checkbox newCheckbox
Ignite UI CLI:
ig add checkbox newCheckbox
Basic IgxCheckbox sample.
| [IgxCheckbox](../../inputs/checkbox.mdx) for binary choices. | -| radio | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radio newRadio
Ignite UI CLI:
ig add radio newRadio
Basic IgxRadio sample.
| [IgxRadio](../../radio-button.mdx) buttons for selecting a single option from a set. | +| radio | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radio newRadio
Ignite UI CLI:
ig add radio newRadio
Basic IgxRadio sample.
| [IgxRadio](../../inputs/radio.mdx) buttons for selecting a single option from a set. | | switch | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c switch newSwitch
Ignite UI CLI:
ig add switch newSwitch
Basic IgxSwitch sample.
| [IgxSwitch](../../inputs/switch.mdx) for toggling between on and off states. | | rating | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c rating newRating
Ignite UI CLI:
ig add rating newRating
Basic igc-rating (Web Components) sample.
| [Rating](../../inputs/rating.mdx) component for selecting a value from a range of symbols. | | icon | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c icon newIcon
Ignite UI CLI:
ig add icon newIcon
Basic IgxIcon sample.
| [IgxIcon](../../layouts/icon.mdx) displaying Material icons. | diff --git a/docs/angular/src/content/en/components/radio-button.mdx b/docs/angular/src/content/en/components/radio-button.mdx deleted file mode 100644 index 2b65760caa..0000000000 --- a/docs/angular/src/content/en/components/radio-button.mdx +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Angular Radio and Radio Group – Ignite UI for Angular | Infragistics | MIT license -description: With Ignite UI for Angular Radio Button and Radio Group controls, developers can seamlessly present lists of options for users to select for better UI in template-driven and reactive forms. -keywords: Angular Radio Group component, Angular Radio Group control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library -license: MIT -llms: - description: "The Ignite UI for Angular Radio Button component allows the user to select a single option from an available set of options that are listed side by side." ---- - -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - -# Angular Radio & Radio Group Component Overview - -## Radio Button - -
-The Ignite UI for Angular Radio Button component allows the user to select a single option from an available set of options that are listed side by side. -
- -## Angular Radio & Radio Group Example - - - -
- -## Getting Started with Ignite UI for Angular Radio Button - -To get started with the Ignite UI for Angular Radio Button component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: - -```cmd -ng add igniteui-angular -``` - -For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. - -The next step is to import the `IgxRadioModule` in the **app.module.ts** file. - -```typescript -// app.module.ts - -... -import { IgxRadioModule } from 'igniteui-angular/radio'; -// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxRadioModule], - ... -}) -export class AppModule { - public selected: any; -} -``` - -Alternatively, as of `16.0.0` you can import the `IgxRadioGroupDirective` and `IgxRadioComponent` as standalone dependencies, or use the [`IGX_RADIO_GROUP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/radio/src/radio/radio-group/public_api.ts) token to import the component and all of its supporting components and directives. - -```typescript -// home.component.ts - -import { FormsModule } from '@angular/forms'; -import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular/radio'; -// import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package - -@Component({ - selector: 'app-home', - template: ` - - London - New York - Tokyo - Sofia - - `, - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IGX_RADIO_GROUP_DIRECTIVES, FormsModule], - /* or imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] */ -}) -export class HomeComponent { - public selected: any; -} -``` - -Now that you have the Ignite UI for Angular Radio Button module or directives imported, you can start using the `igx-radio-group` directive and `igx-radio` component. - -## Using the Angular Radio Button - -Radio buttons can be displayed using the following code inside the component template: - -```html -Option 1 -Option 2 -``` - -### Label - -The `labelPosition` property can be used to change the default position of the label in the radio component. Users can choose between `before` and `after`. If not specified, the label will be placed after the radio button. - -```html -Option 1 -Option 2 -``` - - - -### Properties - -Let's enhance the previous sample by adding four radio buttons, each responsible for applying a certain color as a background. We will bind the backgroundColor property of a div element to the component's selectedColor property. You will notice that selectedColor also participates in a two way binding relation through the `NgModel` directive, therefore its value is updated each time the user selects a different radio button (color). - -```typescript -// radiogroup.component.ts -... -public colors = [{ - hex: '#f06a2f', - name: 'Carrot' -}, { - hex: '#ff134a', - name: 'Watermelon' -}, { - hex: '#7bc96f', - name: 'Grass' -}, -{ - hex: 'transparent', - name: 'No color' -}]; - -public selectedColor: string = this.colors[3].hex; -``` - -```html -{/*radiogroup.component.html*/} - - {{color.name}} - - -
... -
-``` - -Pay attention that if you don't use the `NgModel` directive in a two-way data binding, you must import the `FormsModule` and add it to the NgModule's imports list. - -The final result would be something like that: - - - -## Styling - -### Radio Theme Property Map - -When you modify a primary property, all related dependent properties are automatically updated to reflect the change: - -| Primary Property | Dependent Property | Description | -| --- | --- | --- | -| **$empty-color** | $hover-color | Border and dot colors on hover | -| | $focus-outline-color (indigo) | Focus outline color (Indigo theme) | -| **$fill-color** | $fill-color-hover | Checked dot color on hover | -| | $fill-hover-border-color (non-bootstrap) | Checked border color on hover | -| | $focus-border-color (bootstrap) | Focus border color | -| | $focus-outline-color (bootstrap) | Focus outlined color | -| | $focus-outline-color-filled (indigo) | Focus outline color when radio is filled | -| **$label-color** | $label-color-hover | Label text color on hover | -| **$error-color** | $error-color-hover | Label, border, and dot color in invalid state on hover | -| | $focus-outline-color-error | Focus outline color in invalid state | - -To get started with styling the radio buttons, we need to import the `index` file, where all the theme functions and the `tokens()` mixin are exported: - -```scss -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; -``` - -Following the simplest approach, we create a new theme that extends the . By providing just two key parameters — `$empty-color` and `$fill-color` — you can generate a fully styled radio button. These values serve as the foundation for the theme, by providing them it will automatically compute all the required foreground and background colors for various states (e.g., hover, selected, disabled). - -```scss -$custom-radio-theme: radio-theme( - $empty-color: #345779, - $fill-color: #2dabe8, -); -``` - -Finally, **include** the custom theme in your application: - -```scss -:host { - @include tokens($custom-radio-theme); -} -``` - - - - -The sample uses the [Fluent Light](/themes/sass/schemas#predefined-schemas) schema. - - -
- -### Styling with Tailwind - -You can style the `radio button` using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first. - -Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: - -```scss -@import "tailwindcss"; -... -@use 'igniteui-theming/tailwind/utilities/material.css'; -``` - -The utility file includes both `light` and `dark` theme variants. - -- Use `light-*` classes for the light theme. -- Use `dark-*` classes for the dark theme. -- Append the component name after the prefix, e.g., `light-radio`, `dark-radio`. - -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). - -You can find the full list of properties in the . The syntax is as follows: - -```html - - New York - -``` - - -The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. - - -At the end your radio button should look like this: - - - -## Radio Group - -
-The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms. -
- -### Demo - - - -
- -### Usage - -The Radio Group Directive is exported as an `NgModule`, thus all you need to do in your application is to import the `IgxRadioModule` in the **app.module.ts** file: - -```typescript -// app.module.ts -... -import { IgxRadioModule } from 'igniteui-angular/radio'; -// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [..., IgxRadioModule], - ... -}) -``` - -To get started, create an and add several components. - -Note that, setting a property for the radio group is **mandatory**. - -```html -{/*radio-group.component.html*/} - - - {{fruit}} - - -``` - -```typescript -// radio-group.component.ts -public fruits = ["Apple", "Mango", "Banana", "Orange"]; -``` - -### Alignment - -Use the input property to change the orientation of the `igxRadio` components in the radio group. Users can choose between `horizontal` and `vertical`. By default the radio group alignment is horizontal. - -```typescript -//sample.component.ts -import { RadioGroupAlignment } from "igniteui-angular/radio"; -... -public alignment = RadioGroupAlignment.vertical; -... -``` - -```html -{/* sample.component.html */} - - London - New York - Tokyo - Sofia - -``` - - - -
- -## API References -
-- -- -- -## Theming Dependencies - -- - -## Additional Resources - -
- -Our community is active and always welcoming to new ideas. - -- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/en/components/themes/roundness.mdx b/docs/angular/src/content/en/components/themes/roundness.mdx index 4995d3d3ba..016c5dabbb 100644 --- a/docs/angular/src/content/en/components/themes/roundness.mdx +++ b/docs/angular/src/content/en/components/themes/roundness.mdx @@ -20,7 +20,7 @@ Many Ignite UI components have predefined minimum and maximum border-radius valu When you set `--ig-radius-factor` to 0, the component uses its minimum border-radius and will appear more block-like with sharp corners. When set to 1, the component uses its maximum predefined border-radius and will appear rounded. Here is a list of the components that have predefined minimum and maximum border-radius values and can be modified using the `--ig-radius-factor` variable:
-• [Action Strip](/action-strip) • [Button](inputs/button) • [Button Group](/inputs/button-group) • [Calendar](/calendar) • [Card](/layouts/card) • [Carousel](/layouts/carousel) • [Checkbox](/inputs/checkbox) • [Chip](/inputs/chip) • [Combo](/combo) • [Date Picker](/date-picker) • [Date Range Picker](/date-range-picker) • [Grid](/grid/grid) • [Input Group](/input-group) • [Linear Progress](/linear-progress) • [List](/list) • [Month Picker](/month-picker) • [Navigation Drawer](/navdrawer) • [Radio](/radio-button) • [Ripple](/ripple) • [Snackbar](/snackbar) • [Switch](inputs/switch) • [Toast](/toast) +• [Action Strip](/action-strip) • [Button](inputs/button) • [Button Group](/inputs/button-group) • [Calendar](/calendar) • [Card](/layouts/card) • [Carousel](/layouts/carousel) • [Checkbox](/inputs/checkbox) • [Chip](/inputs/chip) • [Combo](/combo) • [Date Picker](/date-picker) • [Date Range Picker](/date-range-picker) • [Grid](/grid/grid) • [Input Group](/input-group) • [Linear Progress](/linear-progress) • [List](/list) • [Month Picker](/month-picker) • [Navigation Drawer](/navdrawer) • [Radio](/inputs/radio) • [Ripple](/ripple) • [Snackbar](/snackbar) • [Switch](inputs/switch) • [Toast](/toast) ## Usage diff --git a/docs/angular/src/content/en/components/toc.json b/docs/angular/src/content/en/components/toc.json index 556134dbb6..831e5a8143 100644 --- a/docs/angular/src/content/en/components/toc.json +++ b/docs/angular/src/content/en/components/toc.json @@ -2021,9 +2021,9 @@ ] }, { - "name": "Radio & Radio Group", - "href": "radio-button.mdx", - "new": false + "name": "Radio Group", + "href": "inputs/radio.mdx", + "updated": true }, { "name": "Rating", diff --git a/docs/angular/src/content/en/grids_templates/column-hiding.mdx b/docs/angular/src/content/en/grids_templates/column-hiding.mdx index d503175e0d..37ad09a54f 100644 --- a/docs/angular/src/content/en/grids_templates/column-hiding.mdx +++ b/docs/angular/src/content/en/grids_templates/column-hiding.mdx @@ -395,7 +395,7 @@ We can also allow the user to choose the display order of the columns in the col - **Alphabetical** (order the columns alphabetically) - **DisplayOrder** (order the columns according to the way they are displayed in the {ComponentTitle}) -Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the [**IgxRadio**](/radio-button) module. +Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the [**IgxRadio**](/inputs/radio) module. ```typescript // app.module.ts @@ -572,7 +572,7 @@ In some component templates, Emulated View Encapsulation can still prevent the g ## API References -In this article we learned how to use the built-in column hiding UI in the {ComponentTitle}'s toolbar and we defined it as a separate component as well. We introduced a UI that allows the user to choose between different column orders and we set our own custom title and filter prompt texts. We also used an additional Ignite UI for Angular component - the [**IgxRadio**](/radio-button) button. +In this article we learned how to use the built-in column hiding UI in the {ComponentTitle}'s toolbar and we defined it as a separate component as well. We introduced a UI that allows the user to choose between different column orders and we set our own custom title and filter prompt texts. We also used an additional Ignite UI for Angular component - the [**IgxRadio**](/inputs/radio) button. In this article we learned how to use the built-in column hiding UI in the {ComponentTitle}'s toolbar. diff --git a/docs/angular/src/content/jp/components/toc.json b/docs/angular/src/content/jp/components/toc.json index 01e6cb97d0..294380bd52 100644 --- a/docs/angular/src/content/jp/components/toc.json +++ b/docs/angular/src/content/jp/components/toc.json @@ -2024,7 +2024,7 @@ ] }, { - "name": "Radio & Radio Group", + "name": "Radio Group", "href": "radio-button.mdx", "new": false }, diff --git a/docs/angular/src/content/kr/components/toc.json b/docs/angular/src/content/kr/components/toc.json index e72d9260be..b182f4ddf3 100644 --- a/docs/angular/src/content/kr/components/toc.json +++ b/docs/angular/src/content/kr/components/toc.json @@ -1245,7 +1245,7 @@ "new": true }, { - "name": "Radio & Radio Group", + "name": "Radio Group", "href": "radio-button.mdx", "new": false }, diff --git a/docs/xplat/src/assets/images/radio/radio-do-dont.png b/docs/xplat/src/assets/images/radio/radio-do-dont.png new file mode 100644 index 0000000000..a6891458b3 Binary files /dev/null and b/docs/xplat/src/assets/images/radio/radio-do-dont.png differ diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx index b47d7b92e2..857eb010ba 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx @@ -706,7 +706,7 @@ We can also allow the user to choose the display order of the columns in the col - **Alphabetical** (order the columns alphabetically) - **DisplayOrder** (order the columns according to the way they are displayed in the {ComponentTitle}) -Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the [**IgxRadio**](../radio-button.mdx) module. +Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the [**IgxRadio**](../../inputs/radio.mdx) module. ```typescript import { diff --git a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx index 4d4f94c2dc..a74e3263b1 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx @@ -644,8 +644,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand { - Continued - + @if (val) { + Continued + } @else { + Discontinued + } @@ -683,8 +686,11 @@ constructor() { - True - + @if (val) { + True + } @else { + False + } diff --git a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx index b95cb7ad76..237573f5df 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx @@ -639,7 +639,7 @@ The sorting indicator icon in the column header can be customized using a templa @code { public RenderFragment SortDefaultTemplate = (ctx) => { - return @; + return @; }; } @@ -700,7 +700,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { @code { public RenderFragment SortAscendingTemplate = (ctx) => { - return @; + return @; }; } @@ -761,7 +761,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { @code { public RenderFragment SortDescendingTemplate = (ctx) => { - return @; + return @; }; } diff --git a/docs/xplat/src/content/en/components/grids/list.mdx b/docs/xplat/src/content/en/components/grids/list.mdx index 57d0e021f8..562685d79c 100644 --- a/docs/xplat/src/content/en/components/grids/list.mdx +++ b/docs/xplat/src/content/en/components/grids/list.mdx @@ -407,39 +407,30 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```razor - - Small - Medium - Large + + Small + Medium + Large - + @code { - public SizableComponentSize ListSize { get; set; } - - public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs e) - { - IgbRadio radio = e.Parent as IgbRadio; - switch (radio.Value) - { - case "Small": - { - this.ListSize = SizableComponentSize.Small; - break; - } - case "Medium": - { - this.ListSize = SizableComponentSize.Medium; - break; - } - case "Large": - { - this.ListSize = SizableComponentSize.Large; - break; - } - } - } + public string ListSize { get; set; } = "size-medium"; +} +``` + +```css +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-large { + --ig-size: var(--ig-size-large); } ``` diff --git a/docs/xplat/src/content/en/components/inputs/chip.mdx b/docs/xplat/src/content/en/components/inputs/chip.mdx index c873945aa0..b60d81ce17 100644 --- a/docs/xplat/src/content/en/components/inputs/chip.mdx +++ b/docs/xplat/src/content/en/components/inputs/chip.mdx @@ -652,18 +652,15 @@ const [tags, setTags] = useState(['Angular', 'React', 'Blazor']); -Assign a JavaScript handler through `RemoveScript`, and register it with `igRegisterScript` in a script file that your host page loads. - ```razor -Angular -``` - -```js -function handleChipRemove(event) { - event.target.remove(); +@foreach (var tag in Tags) +{ + @tag } -igRegisterScript("handleChipRemove", handleChipRemove, false); +@code { + private readonly List Tags = new() { "Angular", "React", "Blazor" }; +} ``` diff --git a/docs/xplat/src/content/en/components/inputs/combo/features.mdx b/docs/xplat/src/content/en/components/inputs/combo/features.mdx index e61c2e6753..c58e3f2348 100644 --- a/docs/xplat/src/content/en/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/en/components/inputs/combo/features.mdx @@ -157,6 +157,7 @@ switchDisable.addEventListener("igcChange", () => { Data="Data" ValueKey="Id" DisplayKey="Name" + @bind-Value="SelectedCities" DisableFiltering="@DisableFiltering" CaseSensitiveIcon="@CaseSensitiveIcon" GroupKey="@Group" @@ -169,23 +170,21 @@ switchDisable.addEventListener("igcChange", () => { Disable Combo @code { + private string[] SelectedCities = []; private bool DisableFiltering = false; private bool CaseSensitiveIcon = false; private bool Disabled = false; - public void OnDisableFilteringClick(IgbComponentBoolValueChangedEventArgs e) { - IgbSwitch sw = e.Parent as IgbSwitch; - this.DisableFiltering = sw.Checked; + public void OnDisableFilteringClick(IgbCheckboxChangeEventArgs e) { + this.DisableFiltering = e.Detail.Checked; } - public void OnCaseSensitiveClick(IgbComponentBoolValueChangedEventArgs e) { - IgbSwitch sw = e.Parent as IgbSwitch; - this.CaseSensitiveIcon = sw.Checked; + public void OnCaseSensitiveClick(IgbCheckboxChangeEventArgs e) { + this.CaseSensitiveIcon = e.Detail.Checked; } - public void OnDisableClick(IgbComponentBoolValueChangedEventArgs e) { - IgbSwitch sw = e.Parent as IgbSwitch; - this.Disabled = sw.Checked; + public void OnDisableClick(IgbCheckboxChangeEventArgs e) { + this.Disabled = e.Detail.Checked; } } ``` @@ -212,9 +211,8 @@ switchGroup.addEventListener("igcChange", () => { @code { private string Group = ""; - public void OnGroupClick(IgbComponentBoolValueChangedEventArgs e) { - IgbSwitch sw = e.Parent as IgbSwitch; - this.Group = sw.Checked ? "Country" : ""; + public void OnGroupClick(IgbCheckboxChangeEventArgs e) { + this.Group = e.Detail.Checked ? "Country" : ""; } } ``` diff --git a/docs/xplat/src/content/en/components/inputs/icon-button.mdx b/docs/xplat/src/content/en/components/inputs/icon-button.mdx index 638db55402..daf158471e 100644 --- a/docs/xplat/src/content/en/components/inputs/icon-button.mdx +++ b/docs/xplat/src/content/en/components/inputs/icon-button.mdx @@ -169,7 +169,7 @@ The size of the button can be changed by utilizing the `--ig-size` CSS variable ``` - + ```css .size-medium { --ig-size: var(--ig-size-medium); @@ -177,7 +177,7 @@ The size of the button can be changed by utilizing the `--ig-size` CSS variable ``` - + ```css igc-icon-button { --ig-size: var(--ig-size-medium); @@ -188,7 +188,7 @@ igc-icon-button { ```razor - + ``` diff --git a/docs/xplat/src/content/en/components/inputs/radio.mdx b/docs/xplat/src/content/en/components/inputs/radio.mdx index 5fd79d2f08..66b69150b0 100644 --- a/docs/xplat/src/content/en/components/inputs/radio.mdx +++ b/docs/xplat/src/content/en/components/inputs/radio.mdx @@ -1,81 +1,126 @@ --- -title: Radio and Radio Group -description: With {ProductName} Radio Button and Radio Group controls, developers can seamlessly present lists of options for users to select for better UI in template-driven and reactive forms. +title: "{Platform} Radio Group Component" +description: "The {Platform} Radio and Radio Group let users select exactly one option from a set of mutually exclusive options, arranged vertically or horizontally." keywords: "{ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Radio Button components, {Platform} Radio Button controls, {Platform} Radio Group component, {Platform} Radio Group control" license: MIT -mentionedTypes: ["Radio", "RadioGroup", "Form"] +last_updated: "2026-10-09" +relatedComponents: [Checkbox, Switch, Select] +mentionedTypes: ["Radio", "RadioGroup"] llms: - description: "The {ProductName} Radio component allows the user to select a single option from an available set of options that are listed side by side." + description: "The {Platform} Radio and Radio Group are components that let users select exactly one option from a set of mutually exclusive options." --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import { Image } from 'astro:assets'; +import radioAnatomy from '@xplat-images/anatomy-content-light/radio-group-lt-a.png'; +import radioDoDont from '@xplat-images/radio/radio-do-dont.png'; +# Radio Group -# {Platform} Radio & Radio Group +The {Platform} Radio and Radio Group are components that let users select exactly one option from a set of mutually exclusive options. Each radio button represents one option, and the Radio Group arranges the radio buttons in a vertical or horizontal layout. -The {ProductName} Radio component allows the user to select a single option from an available set of options that are listed side by side. +## Live Demo + -## {ProductName} Radio Example + - + + + -### Usage + +## Anatomy - +The {Platform} Radio Group contains radio buttons, and each radio button is made of a radio control and a label. + -First, you need to install the {ProductName} by running the following command: + -Before using the and the , you need to register them as follows: +1. Radio Button Label: indicates the content you want to select or unselect
+2. Radio Button: indicates if the state is selected. The default state of the input is unselected
+3. Button Group: a container that groups related options and allows only one selection at a time -```ts -import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +The following diagram shows the element structure of the {Platform} Radio Group. Each radio button pairs its radio control with label content, which can be placed before or after the control. -defineComponents(IgcRadioComponent, IgcRadioGroupComponent); + + +```text +igx-radio-group — groups the radio buttons +└── igx-radio — one per option + ├── input.igx-radio__input — the native radio input + ├── .igx-radio__composite — the radio control + └── .igx-radio__label — the projected label content ``` -For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic. + + + +```text +igc-radio-group — groups the radio buttons +└── igc-radio — one per option + └── [part="base"] — the +## Getting Started +To use the {Platform} Radio and Radio Group, follow the [{ProductName} Getting Started](../general/getting-started.mdx)[{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then import or register the components for your target platform. - + +Import the and , a theme, and register the components: -First, you need to the install the corresponding {ProductName} npm package by running the following command: +```ts +import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; -```cmd -npm install igniteui-react +defineComponents(IgcRadioComponent, IgcRadioGroupComponent); ``` -You will then need to import the and the , its necessary CSS, and register its module, like so: + + + + +Import the and wrappers and a theme: ```tsx -import { IgrRadio, IgrRadioGroupComponent } from 'igniteui-react'; +import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; ``` - - - - Register the {ProductName} services: ```csharp @@ -92,20 +137,29 @@ You will also need to link an additional CSS file to apply the styling to the ``` - + + +Import the component and the directive: + +```ts +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; +``` + +Add both to the `imports` collection of your component, or add the `IGX_RADIO_GROUP_DIRECTIVES` collection, which contains them, and then use the `igx-radio-group` and `igx-radio` elements in your template. + + -The simplest way to start using the is as follows: +After registration, place the {Platform} Radio components inside a Radio Group and give the group a `name`, so that users can select only one of the options. Set `value` on each radio button to identify the selected option. ```html - - Apple - Banana - Mango - Orange + + Apple + Banana + Mango ``` @@ -114,11 +168,10 @@ The simplest way to start using the is as fo ```tsx - - Apple + + Apple Banana - Mango - Orange + Mango ``` @@ -127,65 +180,101 @@ The simplest way to start using the is as fo ```razor - - Apple - Banana - Mango - Orange + + Apple + Banana + Mango ``` + - -The component doesn't work with the standard `
` element. Use `Form` instead. +```html + + Apple + Banana + Mango + +``` + + + + + + +The {Platform} Radio components are mutually exclusive only when they share a `name`. The Radio Group applies its `name` to every radio button it contains; radio buttons without a `name` act independently of each other. -## Examples + -### Label +### Prerequisites and Version Compatibility -To provide a meaningful label for the , simply place some text between the opening and closing tags: +The {Platform} Radio and Radio Group ship in the following package. The samples in this topic are built with the version listed next to it. - + -```tsx -Label -``` +| Package | Version used in the samples | +| --- | --- | +| `igniteui-angular` | 22.2.0 | -```html -Apple -``` +| Package | Version used in the samples | +| --- | --- | +| `igniteui-webcomponents` | 7.4.1 | + + + + + +| Package | Version used in the samples | +| --- | --- | +| `igniteui-react` | 19.9.0 | -```razor -Apple -``` +| Package | Version used in the samples | +| --- | --- | +| `IgniteUI.Blazor` (or `IgniteUI.Blazor.Trial`) | 26.1.98 | -You can specify if the label should be positioned before or after the button by setting the attribute. Allowed values are `before` and `after`(default): +## Usage - +### Layout -```tsx -Apple -``` +The {Platform} Radio places its label after the radio control by default. Set the property to `before` to place the label before the control. In a vertical Radio Group, radio buttons with the label before the control align to the end of the group. + + + +Place the radio buttons as direct children of the Radio Group. Radio buttons inside a wrapper element aren't part of the group, and the group doesn't lay them out. ```html -Apple + + Yellow + Orange + +``` + + + + + +```tsx + + Yellow + Orange + ``` @@ -193,112 +282,156 @@ You can specify if the label should be positioned before or after the ```razor -Apple + + Yellow + Orange + ``` -The can also be labelled by elements external to it. In this case the user is given full control to position and style the label in accordance to their needs. + +```html + + Yellow + Orange + +``` - + -```tsx -<> - Label - - -``` + + +A radio button can also be labelled by an element outside of it. Reference the element with `aria-labelledby` when you need full control over where the label sits and how it looks. + + + + + +The outside element names the radio button in `igniteui-webcomponents` 7.4.1 and later. In earlier versions, the radio button gets no accessible name from it. ```html -Label - +Express delivery + ``` - + -```razor -Label - +```tsx +Express delivery + ``` - + +```html +Express delivery + +``` + + -### Checked + -You can use the attribute to toggle on the radio. + - + -```tsx - - Apple - Banana - Mango - Orange - -``` + +### Orientation + +The {Platform} Radio Group stacks its radio buttons in a column or places them in a row. Set the property to `vertical` or `horizontal`. The default alignment is `horizontal``vertical`. + ```html - - Apple - Banana - Mango - Orange + + Line + Bar + Pie ``` + + +```tsx + + Line + Bar + Pie + +``` + + + ```razor - - Apple - Banana - Mango - Orange + + Line + Bar + Pie ``` - + +```html + + Line + Bar + Pie + +``` + + -### Invalid + -You can use the attribute to mark the radio as invalid. + - + -```tsx - -``` + +### Interaction States + +The {Platform} Radio shows a hover state when the pointer is over it and a focus ring when it receives keyboard focus. Set the property to show the invalid state, which draws the radio control in the error color of the theme. + ```html - +Daily Updates +``` + + + + + +```tsx +Daily Updates ``` @@ -306,138 +439,201 @@ You can use the ```razor - +Daily Updates ``` - + + +```html +Daily Updates +``` + +The following sample shows the hover, focused, and focused and hovered states for checked, unchecked, and invalid radio buttons. + -### Disabled + -You can use the attribute to disable the radio. + - + -```tsx - - Apple - Banana - Mango - Orange - -``` + +### Disabled States + +Set the property to disable a {Platform} Radio. A disabled radio button can't be selected, and keyboard navigation skips it. + ```html - - Apple - Banana - Mango - Orange + + 18-27 + 28-39 + 40-55 ``` + + +```tsx + + 18-27 + 28-39 + 40-55 + +``` + + + ```razor - - Apple - Banana - Mango - Orange + + 18-27 + 28-39 + 40-55 ``` - + +```html + + 18-27 + 28-39 + 40-55 + +``` + + -### Group Alignment + -The allows you to easily change the placement directionality of the radio buttons it contains using the attribute. Allowed values are `vertical`(default) and `horizontal`. + - + -```tsx - - Apple - Banana - Mango - Orange - -``` + +### On/Off States + +A {Platform} Radio is either on (checked) or off. Set the property on a radio button to turn it on, or set the of the Radio Group to turn on the radio button with the matching value. Turning a radio button on turns off the other radio buttons in the group. + ```html - - Apple - Banana - Mango - Orange + + 18-27 + 28-39 + 40-55 ``` + + +```tsx + + 18-27 + 28-39 + 40-55 + +``` + + + ```razor - - Apple - Banana - Mango - Orange + + 18-27 + 28-39 + 40-55 ``` - + + +```html + + 18-27 + 28-39 + 40-55 + +``` + + + + + + + + + + + ### Forms -You can use the and attributes when using the radio with `Form`. +The {Platform} Radio submits the `value` of the selected radio button under the group's `name`. Set the property on a radio button of the group to require a selection before the form is submitted. - + -```tsx - - Apple - Banana - Mango - Orange - -``` +To show a message when the selection is missing, put it in the `value-missing` slot of a radio button. The required selection makes every radio button of the group invalid, so place the message in the last radio button to show it below the group. ```html - - Apple - Banana - Mango - Orange - + + + Apple + Banana + + Orange + Choose a fruit. + + + +``` + + + + + +```tsx +
+ + Apple + Banana + + Orange + Choose a fruit. + + +
``` @@ -445,49 +641,435 @@ You can use the a ```razor - - Apple - Banana - Mango - Orange + + Apple + Banana + + Orange + Choose a fruit. + ``` + +The component doesn't work with a standard HTML `
` element in Blazor. Use the Blazor `EditForm` component instead. + + + + + + +The Radio Group works with template-driven and reactive forms. Bind the selected value with `ngModel` or a form control on `igx-radio-group`: + +```html + + + Apple + Banana + Orange + + +``` + +
+ +### Do/Don't + +When extending a Radio Group with additional items, make sure that they are aligned consistently and form a single column. Avoid layout in multiple columns, as well as situations with more than one Radio element with on state at a time. + +
+
+ Do: list the radio buttons of a group in a single column with one option on. Don't: split them into multiple columns or turn on more than one option. +
+
+ +## Properties + +The following properties cover the {Platform} Radio and Radio Group options documented on this page. See the API references for the complete generated list. + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| | `boolean``bool` | `false` | Gets or sets whether the radio button is on. | +| | `boolean``bool` | `false` | Gets or sets whether the radio button is disabled. | +| | `boolean``bool` | `false` | Gets or sets whether the radio button is in the invalid state. | +| | `LabelPosition``ToggleLabelPosition` | `after``ToggleLabelPosition.After` | Sets whether the label is placed before or after the radio control. | +| | `boolean``bool` | `false` | Gets or sets whether a selection is required. | +| | `any``string` | — | Gets or sets the value submitted with the form when the radio button is on. | +| (Radio Group) | `RadioGroupAlignment``ContentOrientation` | `horizontal``vertical``ContentOrientation.Vertical` | Sets whether the radio buttons are stacked in a column or placed in a row. | +| (Radio Group) | `any``string` | — | Gets or sets the value of the radio button that is on. | +| | `string` | — | Gets or sets the name that groups radio buttons together. | +| (Radio Group) | `string` | — | Gets or sets the name applied to all radio buttons in the group. | + +## Methods + +The {Platform} Radio exposes the following methods. + + + +| Name | Description | +| --- | --- | +| | Checks the validity of the radio button and returns `true` when it's valid. | +| | Checks the validity of the radio button, shows its invalid state when it isn't valid, and returns `true` when it's valid. | +| | Sets a custom validation message. Pass an empty string to clear it. | +| | Simulates a click on the radio button, which turns it on. | +| | Moves focus to the radio button. | +| | Removes focus from the radio button. | + + + + + +| Name | Description | +| --- | --- | +| | Checks the validity of the radio button and returns `true` when it's valid. | +| | Checks the validity of the radio button, shows its invalid state when it isn't valid, and returns `true` when it's valid. | +| | Sets a custom validation message. Pass an empty string to clear it. | +| | Simulates a click on the radio button, which turns it on. | +| | Moves focus to the radio button. | +| | Removes focus from the radio button. | + +Each method also has an asynchronous version that returns a `Task`, for example `CheckValidityAsync()`. + + + + + +| Name | Description | +| --- | --- | +| | Turns the radio button on and emits the `change` event. It does nothing when the radio button is already on. | +| | Turns the radio button off without emitting the `change` event. | + +## Events + +The {Platform} Radio emits an event when the user turns a radio button on. + +| Name | Description | +| --- | --- | +| (Radio and Radio Group)`igcChange` | Emitted when the checked state of a radio button changes. The event arguments carry the `checked` state and the `value` of the radio button. | +| (Radio Group) | Raised with the new value of the Radio Group when its selection changes. `@bind-Value` uses it. | +| | Raised with the new checked state of the radio button. `@bind-Checked` uses it. | + ## Styling -The component exposes several CSS parts (`base`, `control`, and `label`) to give you full control over its styling. +The {Platform} Radio is styled through the {ProductName} theme and the CSS variables it generates. CSS parts give you access to the internal elements of the radio button. The following sample draws the radio buttons of a shipping form with a custom palette and typeface. -```css -igc-radio::part(control) { - --size: 18px; + + + + + + + + + + + + +### Sass Theming + +Create a theme with the `radio-theme` function and include it with the `tokens` mixin. Setting `$empty-color` and `$fill-color` is enough for a fully styled radio button, because the theme derives the remaining colors from them. + + + +```scss +@use "igniteui-angular/theming" as *; + +$custom-radio-theme: radio-theme( + $empty-color: #345779, + $fill-color: #2dabe8, +); + +:host { + @include tokens($custom-radio-theme); } +``` + + + + + +```scss +@use "igniteui-theming" as *; -igc-radio-group { - padding: 12px; +$custom-radio-theme: radio-theme( + $empty-color: #345779, + $fill-color: #2dabe8, +); + +:root { + @include tokens($custom-radio-theme); } +``` + + + +When you set a primary parameter, the theme derives its dependent parameters: + +| Primary parameter | Dependent parameters | What it changes | +| --- | --- | --- | +| `$empty-color` | `$hover-color`, `$focus-outline-color` (Indigo) | The border of an unchecked radio button. | +| `$fill-color` | `$fill-color-hover`, `$fill-hover-border-color`, `$focus-border-color` (Bootstrap), `$focus-outline-color` (Bootstrap), `$focus-outline-color-filled` (Indigo) | The border and dot of a checked radio button. | +| `$label-color` | `$label-color-hover` | The label text. | +| `$error-color` | `$error-color-hover`, `$focus-outline-color-error` | The label, border, and dot in the invalid state. | + +### CSS Variables + +Set the following CSS variables on a radio button, or on one of its ancestors, to change its colors without a Sass theme: + +| Variable | What it changes | +| --- | --- | +| `--ig-radio-label-color` | The label text. | +| `--ig-radio-empty-color` | The border of an unchecked radio button. | +| `--ig-radio-empty-fill-color` | The fill of an unchecked radio button. | +| `--ig-radio-fill-color` | The border and dot of a checked radio button. | +| `--ig-radio-hover-color` | The border and dot on hover. | +| `--ig-radio-fill-color-hover` | The dot of a checked radio button on hover. | +| `--ig-radio-error-color` | The label, border, and dot in the invalid state. | +| `--ig-radio-disabled-color` | The border and dot of a disabled radio button. | +| `--ig-radio-disabled-label-color` | The label of a disabled radio button. | +| `--ig-radio-focus-outline-color` | The focus outline. | + + + +### Style Parts -igc-radio::part(checked)::after { - background-color: var(--ig-success-500); +Use the following CSS parts to target the internal elements of the {Platform} Radio. Each part also carries the `checked` part name while the radio button is on, so `::part(control checked)` targets only a checked radio control. + +| Part | What it styles | +| --- | --- | +| `base` | The wrapper of the radio control and the label. | +| `control` | The radio control. | +| `label` | The label. | + +```css +igc-radio { + --ig-radio-fill-color: #0176ff; + --ig-radio-empty-color: #a9b8cc; } igc-radio::part(label) { - color: var(--ig-secondary-800); + color: #002b5c; + font-weight: 600; } ``` - + + +### Styling with Tailwind + +You can style the {Platform} Radio with the custom Tailwind utility classes from `igniteui-theming`. Make sure to [set up Tailwind](/themes/misc/tailwind-classes)[set up Tailwind](/themes/tailwind) first, then import the utilities in your global stylesheet: + +```css +@import "tailwindcss"; +@import "igniteui-theming/tailwind/utilities/material.css"; +``` + +Use the `light-radio` or `dark-radio` class for the corresponding theme and override its CSS variables with arbitrary properties: + + + +```tsx +Tokyo +``` + + + +```html +Tokyo +``` + + + + + +```razor +Tokyo +``` + + + + + +```html +Tokyo +``` + + + +The exclamation mark (`!`) gives the Tailwind utility precedence over the default theme styles of the Radio. + + + + + + + + + + + + + +## Accessibility + +The {Platform} Radio renders a native radio input, so assistive technologies announce each radio button with its role, label, and checked state. + +### Keyboard Interaction + +The {Platform} Radio Group moves focus and selection between its enabled radio buttons with the arrow keys. Disabled radio buttons are skipped. + +| Key | Action | +| --- | --- | +| Tab / Shift+Tab | Moves focus into or out of the Radio Group. | +| Arrow Down / Arrow Right | Moves focus to the next enabled radio button and turns it on. From the last radio button, moves to the first one. In right-to-left layouts, Arrow Right moves to the previous radio button. | +| Arrow Up / Arrow Left | Moves focus to the previous enabled radio button and turns it on. From the first radio button, moves to the last one. In right-to-left layouts, Arrow Left moves to the next radio button. | +| Space | Turns on the focused radio button. | +| Enter | Submits the form that contains the radio button. | + + + +When a radio button in the group is on, it is the only tab stop of the group. When none of the radio buttons is on, each of them is a tab stop. + + + + + +In `IgniteUI.Blazor` 26.1, clearing the selection in code leaves no tab stop in the group. See [Known Limitations](#known-limitations). + + + +### Screen Readers / ARIA + +- Each {Platform} Radio renders a native ``, which exposes the radio role, the checked state, and the disabled and required states. The input also sets `aria-invalid` from the `invalid` property. +- The label content of the radio button is its accessible name. When the label is outside the component, connect it with `aria-labelledby`. + + + +- The Radio Group renders the `radiogroup` role and sets `aria-orientation` from its `alignment`. + + + + + +- The Radio Group renders the `radiogroup` role. In `IgniteUI.Blazor` 26.1, it doesn't set `aria-orientation`. + + + + + +- Give the Radio Group an accessible name, for example with `aria-labelledby` pointing to the question it answers. + + + + + +- The `igx-radio-group` element doesn't render a `radiogroup` role. Add `role="radiogroup"` and an accessible name, for example with `aria-labelledby`, when the group needs to be announced as one question. + + + +### Accessibility Compliance + +Verify the rendered {Platform} Radio and Radio Group against the accessibility requirements of your application. + +| Criterion | How the component supports the requirement | +| --- | --- | +| [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) | Users move between the enabled radio buttons and turn them on with the arrow keys and Space. | +| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | Each radio button exposes its label as the accessible name, the radio role, and its checked state through the native radio input. | + +Your responsibilities: + +- Give every radio button meaningful label content, and give the Radio Group an accessible name. +- Keep the focus ring visible and preserve sufficient contrast when you customize the Radio colors. +- Show a validation message when the Radio is invalid, so the error isn't conveyed by color alone. Use the `value-missing` slot, as shown in [Forms](#forms). Show it in the surrounding form. +- Test the rendered Radio Group with keyboard navigation and the assistive technologies your users rely on. + + + +## Known Limitations + + + + + +The {Platform} Radio and Radio Group have the following known limitations: + +- The Radio doesn't work with a standard HTML `
` element in Blazor. Use the Blazor `EditForm` component instead. +- In `IgniteUI.Blazor` 26.1, a radio button can't be labelled by an element outside of it. `IgbRadio` has no `AriaLabelledBy` parameter, and an `aria-labelledby` attribute doesn't give the radio button an accessible name. Put the label text inside the radio button. +- In `IgniteUI.Blazor` 26.1, clearing the selection in code takes every radio button out of the tab order. Keyboard users can't reach the group until a mouse click or your code turns one of its radio buttons on again. + + + + + +The {Platform} Radio and Radio Group have the following known limitation: + +- The `igx-radio-group` element doesn't render a `radiogroup` role. Add the role and an accessible name to the element yourself. + + ## API References +See the complete {Platform} Radio and Radio Group API references: + +- + + -
-
+- +- + + + + + +- + + + +## Dependencies + +The {Platform} Radio requires a theme stylesheet to apply its visual styling. See the framework-specific setup in [**Getting Started**](../general/getting-started.mdx)[**Getting Started**](../general-getting-started.mdx). The Radio also uses the for its ripple effect. ## Additional Resources +Use the following {Platform} resources for API details and project support: + - [{ProductName} **Forums**]({ForumsLink}) - [{ProductName} **GitHub**]({GithubLink}) + +## Related Components + +The {Platform} Radio is intended for one choice from a short list of mutually exclusive options. Use the following related components for other kinds of choices: + +- [Checkbox](./checkbox.mdx) - Use Checkbox when users can select more than one option. +- [Switch](./switch.mdx) - Use Switch when the control turns a single setting on or off immediately. +- [Select](../select.mdx)[Select](./select.mdx) - Use Select when the list of options is long or space is limited. + +## FAQ + +These frequently asked questions cover common {Platform} Radio and Radio Group selection, form, and state scenarios. + + + + Handle the `igcChange``onChange``Change``change` event on the {Platform} Radio Group. The change event arguments carry the `value` of the radio button the user turned on. You can also bind the selected value with `ngModel` or a form control on `igx-radio-group`. You can also bind the selected value with `@bind-Value` on the Radio Group. The change event doesn't fire when you set the Radio Group `value` in code. + + + Set the {Platform} Radio Group `value` to the `value` of the radio button you want to turn on. You can also set `checked` on that radio button, which turns off the other radio buttons in the group. Selecting a radio button in code doesn't fire the change event. Setting the Radio Group `value` doesn't fire the `change` event. To select a radio button and fire the `change` event, call the `select()` method of that radio button. + + + Users can't turn off a selected {Platform} Radio by clicking it again, which is the standard radio button behavior. To clear the selection in code, set the Radio Group `value` to an empty string or another value that none of its radio buttons has. In `IgniteUI.Blazor` 26.1, this also takes every radio button out of the tab order, as described in [Known Limitations](#known-limitations).To clear the selection in code, set the Radio Group `value`, or the form control bound to the group, to `null`. If users need to clear the selection themselves, add a "None" option or a separate clear button. + + + {Platform} Radio buttons are mutually exclusive only when they share the same `name`, so radio buttons without a shared `name` can be on at the same time. Set `name` on the Radio Group, which applies it to all of its radio buttons, or set the same `name` on each radio button.{Platform} Radio buttons are mutually exclusive when they're placed in the same `igx-radio-group`, which generates a shared `name` when you don't set one. Place radio buttons that belong together in one Radio Group instead of using standalone radio buttons. + + + Set `required` on any radio button of the {Platform} Radio Group, and the whole group requires a selection before the form can be submitted. When the form is submitted, the group's `name` is sent with the `value` of the selected radio button.Set `required` on any radio button of the {Platform} Radio Group, and the whole group requires a selection. Place the Radio Group in a Blazor `EditForm`, because the Radio doesn't work with a standard HTML `` element in Blazor.Set `required` on the {Platform} Radio Group, or add `Validators.required` to the form control bound to the group. The form stays invalid until the user turns on one of the radio buttons. + + + The {Platform} Radio Group doesn't have a `disabled` property of its own. To disable the whole group, set `disabled` on each of its radio buttons, for example by binding all of them to the same state.When the {Platform} Radio Group is bound to a reactive form control, call `disable()` on the control to disable all of its radio buttons. Without a form control, set `disabled` on each `igx-radio`, because the Radio Group doesn't have a `disabled` input. + + diff --git a/docs/xplat/src/content/en/components/inputs/rating.mdx b/docs/xplat/src/content/en/components/inputs/rating.mdx index 4b7f200d50..be68275284 100644 --- a/docs/xplat/src/content/en/components/inputs/rating.mdx +++ b/docs/xplat/src/content/en/components/inputs/rating.mdx @@ -1373,7 +1373,7 @@ The following resources provide more {Platform} Rating guidance and project supp The {Platform} Rating collects a score on a scale of symbols. Use these components when the input needs a different form: - [Slider](../slider/slider.mdx)[Slider](./slider.mdx) - Use Slider when users pick a precise number from a continuous range, such as a price or a volume. -- [Radio Group](../radio-button.mdx)[Radio Group](./radio.mdx) - Use Radio Group when each option needs a text label, such as Poor, Fair, and Good. +- [Radio Group](./radio.mdx)[Radio Group](./radio.mdx) - Use Radio Group when each option needs a text label, such as Poor, Fair, and Good. - [Icon](../layouts/icon.mdx) - Use Icon to draw the custom symbols of a Rating. ## FAQ diff --git a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx index d22346fba5..adae5703a0 100644 --- a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx @@ -110,7 +110,7 @@ This index records what each component's documentation covers today. **Not docum | [Month Picker](../month-picker.mdx#keyboard-navigation) | Documented | Not documented yet | [Keyboard navigation](../month-picker.mdx#keyboard-navigation) | | [Navbar](../navbar.mdx) | Not documented yet | Not documented yet | — | | [Navigation Drawer](../navdrawer.mdx) | Not documented yet | Not documented yet | — | -| [Radio](../radio-button.mdx) | Not documented yet | Not documented yet | — | +| [Radio](../inputs/radio.mdx#accessibility) | Documented | Documented | [Accessibility](../inputs/radio.mdx#accessibility) | | [Rating](../inputs/rating.mdx#accessibility) | Documented | Documented | [Accessibility](../inputs/rating.mdx#accessibility) | | [Select](../select.mdx#keyboard-navigation) | Documented | Not documented yet | [Keyboard navigation](../select.mdx#keyboard-navigation) | | [Slider](../slider/slider.mdx) | Not documented yet | Not documented yet | — | @@ -158,7 +158,7 @@ This index records what each component's documentation covers today. **Not docum | [Linear Progress](../inputs/linear-progress.mdx) | Not documented yet | Not documented yet | — | | [Navbar](../menus/navbar.mdx) | Not documented yet | Not documented yet | — | | [Navigation Drawer](../menus/navigation-drawer.mdx) | Not documented yet | Not documented yet | — | -| [Radio](../inputs/radio.mdx) | Not documented yet | Not documented yet | — | +| [Radio](../inputs/radio.mdx#accessibility) | Documented | Documented | [Accessibility](../inputs/radio.mdx#accessibility) | | [Rating](../inputs/rating.mdx#accessibility) | Documented | Documented | [Accessibility](../inputs/rating.mdx#accessibility) | | [Select](../inputs/select.mdx#keyboard-navigation) | Documented | Not documented yet | [Keyboard navigation](../inputs/select.mdx#keyboard-navigation) | | [Slider](../inputs/slider.mdx) | Not documented yet | Not documented yet | — | diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx index 3e8b7c53c2..abcbfaaad1 100644 --- a/docs/xplat/src/content/en/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx @@ -222,7 +222,7 @@ const ChatExample = () => { ```razor - + ``` ```cs diff --git a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx index 7ff7254501..a4e5028803 100644 --- a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx @@ -224,7 +224,7 @@ To enhance our component a bit, we can use it in conjunction with the Home - + Sample Drawer @@ -306,48 +306,20 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```razor - - Start - End - Top - Bottom + + Start + End + Top + Bottom @code { public IgbNavDrawer NavDrawerRef { get; set; } - public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs args) - { - IgbRadio radio = args.Parent as IgbRadio; - - if (this.NavDrawerRef != null) - { - switch (radio.Value) - { - case "Start": - { - this.NavDrawerRef.Position = NavDrawerPosition.Start; - break; - } - case "End": - { - this.NavDrawerRef.Position = NavDrawerPosition.End; - break; - } - case "Top": - { - this.NavDrawerRef.Position = NavDrawerPosition.Top; - break; - } - case "Bottom": - { - this.NavDrawerRef.Position = NavDrawerPosition.Bottom; - break; - } - } - } - } + private string position = "Start"; + + public NavDrawerPosition Position => Enum.Parse(position); } ``` diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx index 9d34485b8c..f3f73268ad 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -152,13 +152,12 @@ const date = new Date(); ```Razor - + @code { public DateTime SelectedDate { get; set; } - public IgbDatePicker DatePicker { get; set; } protected override void OnInitialized() { @@ -439,7 +438,7 @@ In forms, we can handle the `change` event of the component and update the value -In forms, we can handle the `Change` event of the component and update the value of the label. +In forms, bind the component's value with `@bind-Value`. In the sample the picker is required, and the form's `@onsubmit` handler shows the submitted date instead of reloading the page. A native reset button returns the picker to its initial value without raising a change event, so the `@onreset` handler clears the bound field. diff --git a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx index dfbebf6928..5c0a44dc51 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx @@ -180,11 +180,9 @@ return ( ```razor - + @code { - public IgbDateRangePicker DateRangePicker { get; set; } - public IgbDateRangeValue Range = new IgbDateRangeValue() { Start = DateTime.Today, @@ -870,9 +868,13 @@ return ( ```razor - - Toggle week numbers + + Toggle week numbers + +@code { + private bool ShowWeekNumbers; +} ``` diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json index a172bd69df..10e40c7eba 100644 --- a/docs/xplat/src/content/en/toc.json +++ b/docs/xplat/src/content/en/toc.json @@ -3372,11 +3372,9 @@ ] }, { - "exclude": [ - "Angular" - ], - "name": "Radio & Radio Group", + "name": "Radio Group", "href": "inputs/radio.mdx", + "updated": true, "include": [ "Web" ] diff --git a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx index 6753294094..da8e6b53c1 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx @@ -620,8 +620,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand { - Continued - + @if (val) { + Continued + } @else { + Discontinued + } @@ -659,8 +662,11 @@ constructor() { - True - + @if (val) { + True + } @else { + False + } diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx index 1e0612ab7e..40dbf5ab35 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx @@ -641,7 +641,7 @@ The supports remote sorting, which is demonst @code { public RenderFragment SortDefaultTemplate = (ctx) => { - return @; + return @; }; } @@ -702,7 +702,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { @code { public RenderFragment SortAscendingTemplate = (ctx) => { - return @; + return @; }; } @@ -763,7 +763,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { @code { public RenderFragment SortDescendingTemplate = (ctx) => { - return @; + return @; }; } @@ -822,7 +822,7 @@ const sortDescendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => @code { public RenderFragment SortDefaultTemplate = (ctx) => { - return @; + return @; }; } ``` @@ -878,7 +878,7 @@ $custom-theme: grid-theme( @code { public RenderFragment SortAscendingTemplate = (ctx) => { - return @; + return @; }; } ``` diff --git a/docs/xplat/src/content/jp/components/grids/list.mdx b/docs/xplat/src/content/jp/components/grids/list.mdx index 751ee17c09..ea72568f22 100644 --- a/docs/xplat/src/content/jp/components/grids/list.mdx +++ b/docs/xplat/src/content/jp/components/grids/list.mdx @@ -449,39 +449,30 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```razor - - Small - Medium - Large + + Small + Medium + Large - + @code { - public SizableComponentSize ListSize { get; set; } - - public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs e) - { - IgbRadio radio = e.Parent as IgbRadio; - switch (radio.Value) - { - case "Small": - { - this.ListSize = SizableComponentSize.Small; - break; - } - case "Medium": - { - this.ListSize = SizableComponentSize.Medium; - break; - } - case "Large": - { - this.ListSize = SizableComponentSize.Large; - break; - } - } - } + public string ListSize { get; set; } = "size-medium"; +} +``` + +```css +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-large { + --ig-size: var(--ig-size-large); } ``` diff --git a/docs/xplat/src/content/jp/components/inputs/chip.mdx b/docs/xplat/src/content/jp/components/inputs/chip.mdx index 19bda0aa1b..d482696c25 100644 --- a/docs/xplat/src/content/jp/components/inputs/chip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/chip.mdx @@ -653,18 +653,15 @@ const [tags, setTags] = useState(['Angular', 'React', 'Blazor']); -`RemoveScript` を通じて JavaScript ハンドラーを割り当て、ホスト ページが読み込むスクリプト ファイルで `igRegisterScript` を使用して登録します。 - ```razor -Angular -``` - -```js -function handleChipRemove(event) { - event.target.remove(); +@foreach (var tag in Tags) +{ + @tag } -igRegisterScript("handleChipRemove", handleChipRemove, false); +@code { + private readonly List Tags = new() { "Angular", "React", "Blazor" }; +} ``` diff --git a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx index e6d7c4cc7c..b24e4e5955 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx @@ -159,6 +159,7 @@ switchDisable.addEventListener("igcChange", () => { Data="Data" ValueKey="Id" DisplayKey="Name" + @bind-Value="SelectedCities" DisableFiltering="@DisableFiltering" CaseSensitiveIcon="@CaseSensitiveIcon" GroupKey="@Group" @@ -171,23 +172,21 @@ switchDisable.addEventListener("igcChange", () => { Disable Combo @code { + private string[] SelectedCities = []; private bool DisableFiltering = false; private bool CaseSensitiveIcon = false; private bool Disabled = false; - public void OnDisableFilteringClick(IgbComponentBoolValueChangedEventArgs e) { - IgbSwitch sw = e.Parent as IgbSwitch; - this.DisableFiltering = sw.Checked; + public void OnDisableFilteringClick(IgbCheckboxChangeEventArgs e) { + this.DisableFiltering = e.Detail.Checked; } - public void OnCaseSensitiveClick(IgbComponentBoolValueChangedEventArgs e) { - IgbSwitch sw = e.Parent as IgbSwitch; - this.CaseSensitiveIcon = sw.Checked; + public void OnCaseSensitiveClick(IgbCheckboxChangeEventArgs e) { + this.CaseSensitiveIcon = e.Detail.Checked; } - public void OnDisableClick(IgbComponentBoolValueChangedEventArgs e) { - IgbSwitch sw = e.Parent as IgbSwitch; - this.Disabled = sw.Checked; + public void OnDisableClick(IgbCheckboxChangeEventArgs e) { + this.Disabled = e.Detail.Checked; } } ``` @@ -214,9 +213,8 @@ switchGroup.addEventListener("igcChange", () => { @code { private string Group = ""; - public void OnGroupClick(IgbComponentBoolValueChangedEventArgs e) { - IgbSwitch sw = e.Parent as IgbSwitch; - this.Group = sw.Checked ? "Country" : ""; + public void OnGroupClick(IgbCheckboxChangeEventArgs e) { + this.Group = e.Detail.Checked ? "Country" : ""; } } ``` diff --git a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx index 0ecb362df9..565f074ff1 100644 --- a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx @@ -171,7 +171,7 @@ builder.Services.AddIgniteUIBlazor(); ``` - + ```css .size-medium { --ig-size: var(--ig-size-medium); @@ -179,7 +179,7 @@ builder.Services.AddIgniteUIBlazor(); ``` - + ```css igc-icon-button { --ig-size: var(--ig-size-medium); @@ -190,7 +190,7 @@ igc-icon-button { ```razor - + ``` diff --git a/docs/xplat/src/content/jp/components/interactivity/chat.mdx b/docs/xplat/src/content/jp/components/interactivity/chat.mdx index e189d162e3..7bea179b17 100644 --- a/docs/xplat/src/content/jp/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/chat.mdx @@ -215,7 +215,7 @@ const ChatExample = () => { ```razor - + ``` ```cs diff --git a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx index 593b891bf4..767f4437d0 100644 --- a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx @@ -226,7 +226,7 @@ defineComponents(IgcNavDrawerComponent);

Home

- + Sample Drawer @@ -308,48 +308,20 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```razor - - Start - End - Top - Bottom + + Start + End + Top + Bottom @code { public IgbNavDrawer NavDrawerRef { get; set; } - public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs args) - { - IgbRadio radio = args.Parent as IgbRadio; - - if (this.NavDrawerRef != null) - { - switch (radio.Value) - { - case "Start": - { - this.NavDrawerRef.Position = NavDrawerPosition.Start; - break; - } - case "End": - { - this.NavDrawerRef.Position = NavDrawerPosition.End; - break; - } - case "Top": - { - this.NavDrawerRef.Position = NavDrawerPosition.Top; - break; - } - case "Bottom": - { - this.NavDrawerRef.Position = NavDrawerPosition.Bottom; - break; - } - } - } - } + private string position = "Start"; + + public NavDrawerPosition Position => Enum.Parse(position); } ``` diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index 59e245f886..b767dfa806 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -153,13 +153,12 @@ const date = new Date(); ```Razor - + @code { public DateTime SelectedDate { get; set; } - public IgbDatePicker DatePicker { get; set; } protected override void OnInitialized() { @@ -440,7 +439,7 @@ prefix スロットと suffix スロットを使用すると、Input のメイ -フォームでは、コンポーネントの `Change` イベントを処理し、ラベルの値を更新できます。 +フォームでは、`@bind-Value` でコンポーネントの値をバインドします。このサンプルでは Date Picker を必須にしており、フォームの `@onsubmit` ハンドラーはページを再読み込みせずに送信された日付を表示します。ネイティブのリセット ボタンは change イベントを発生させずにピッカーを初期値に戻すため、`@onreset` ハンドラーでバインドしたフィールドをクリアします。 diff --git a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx index 54e2596b7e..4508df648a 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx @@ -198,11 +198,9 @@ return ( ```razor - + @code { - public IgbDateRangePicker DateRangePicker { get; set; } - public IgbDateRangeValue Range = new IgbDateRangeValue() { Start = DateTime.Today, @@ -902,9 +900,13 @@ return ( ```razor - - Toggle week numbers + + Toggle week numbers + +@code { + private bool ShowWeekNumbers; +} ``` diff --git a/src/integration.ts b/src/integration.ts index 33b9521f71..f301b57821 100644 --- a/src/integration.ts +++ b/src/integration.ts @@ -73,6 +73,38 @@ import { igChrome } from 'igniteui-astro-components/chrome'; import { rehypeStripEmptyParagraphs } from './plugins/rehype-strip-empty-paragraphs'; import { rehypeApiReferencesGrid } from './plugins/rehype-api-references-grid'; +/** + * Scopes Razor component tags (``, ``) the way VS Code's C# extension does. + * + * The razor grammar leaves those tags to the HTML grammar, which scopes any tag outside the + * HTML spec as `invalid.illegal.unrecognized-tag.html`, and themes style that as an error. + * VS Code recolors them from the language server; without one, the grammar has to. + */ +const razorComponentTags = { + name: 'razor-component-tags', + scopeName: 'razor.component-tags', + injectTo: ['text.aspnetcorerazor'], + // Only markup handled by the HTML grammar: not code (`List` in `@code`), comments, + // attribute values, Razor expressions (`@(a ])', + beginCaptures: { + 1: { name: 'punctuation.definition.tag.begin.html' }, + 2: { name: 'entity.name.class.element.component' }, + }, + end: '/?>', + endCaptures: { 0: { name: 'punctuation.definition.tag.end.html' } }, + name: 'meta.tag.component.razor', + patterns: [{ include: 'text.html.basic#attribute' }], + }, + ], +}; + /** * The Infragistics header/footer, a snapshot of the marketing site's own * export (/assets/chrome/fragment.html), kept current by sync PRs from the @@ -881,6 +913,7 @@ export function createDocsSite(options: CreateDocsSiteOptions = {} as CreateDocs markdown: { shikiConfig: { theme: 'dark-plus', + langs: [razorComponentTags], wrap: true, }, ...(astroExtra as any).markdown,