The Ignite UI for Web Components Radio component allows the user to select a single option from an available set of options that are listed side by side.
<!DOCTYPE html><html><head><title>Radio Group</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit"value="apple">Apple</igc-radio><igc-radioname="fruit"value="banana"checked>Banana</igc-radio><igc-radioname="fruit"value="mango">Mango</igc-radio><igc-radioname="fruit"value="orange">Orange</igc-radio></igc-radio-group></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Usage
First, you need to install the Ignite UI for Web Components by running the following command:
The IgcRadioComponent component doesn't work with the standard <form> element. Use Form instead.
Examples
Label
To provide a meaningful label for the IgcRadioComponent, simply place some text between the opening and closing tags:
<igc-radio>Apple</igc-radio>html
You can specify if the label should be positioned before or after the IgcRadioComponent button by setting the label-position attribute. Allowed values are before and after(default):
The IgcRadioComponent 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.
<!DOCTYPE html><html><head><title>Radio Group</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web"
/><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css"
/></head><body><divid="root"><divclass="container sample"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit"label-position="before"value="apple">Apple</igc-radio><divstyle="display: flex; align-items: center"><spanid="radio-label">Label</span><igc-radioname="fruit"label-position="before"aria-labelledby="radio-label"value="orange"
></igc-radio></div></igc-radio-group></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Checked
You can use the checked attribute to toggle on the radio.
<!DOCTYPE html><html><head><title>Radio Group</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit"value="apple">Apple</igc-radio><igc-radioname="fruit"value="banana"checked>Banana</igc-radio><igc-radioname="fruit"value="mango">Mango</igc-radio><igc-radioname="fruit"value="orange">Orange</igc-radio></igc-radio-group></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Invalid
You can use the invalid attribute to mark the radio as invalid.
<!DOCTYPE html><html><head><title>Radio Group</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web"
/><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css"
/></head><body><divid="root"><divclass="container sample"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radioinvalid>Invalid</igc-radio></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Disabled
You can use the disabled attribute to disable the radio.
<!DOCTYPE html><html><head><title>Radio Disabled</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web"
/><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css"
/></head><body><divid="root"><divclass="container sample"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit">Apple</igc-radio><igc-radioname="fruit"disabled>Banana</igc-radio><igc-radioname="fruit">Mango</igc-radio><igc-radioname="fruit">Orange</igc-radio></igc-radio-group></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Group Alignment
The IgcRadioGroupComponent allows you to easily change the placement directionality of the radio buttons it contains using the alignment attribute. Allowed values are vertical(default) and horizontal.
<!DOCTYPE html><html><head><title>Radio Group Alignment</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web"
/><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css"
/></head><body><divid="root"><divclass="container sample"><divstyle="width: 430px; border: 1px solid gainsboro"><igc-radio-groupalignment="horizontal"><igc-radioname="fruit">Apple</igc-radio><igc-radioname="fruit"checked>Banana</igc-radio><igc-radioname="fruit">Mango</igc-radio><igc-radioname="fruit">Orange</igc-radio></igc-radio-group></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Forms
You can use the name and value attributes when using the radio with Form.
<!DOCTYPE html><html><head><title>Radio Group</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web"
/><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css"
/></head><body><divid="root"><divclass="container sample"><divstyle="width: 400px; border: 1px solid gainsboro"><igc-radio-group><igc-radioname="fruit">Apple</igc-radio><igc-radioname="fruit"checked>Banana</igc-radio><igc-radioname="fruit">Mango</igc-radio><igc-radioname="fruit">Orange</igc-radio></igc-radio-group></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html