React Radio & Radio Group

    Ignite UI for React Radio 구성 요소를 사용하면 나란히 나열된 사용 가능한 옵션 집합에서 단일 옵션을 선택할 수 있습니다.

    Ignite UI for React Radio Example

    Usage

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    You will then need to import the IgrRadio and the IgrRadioGroup, its necessary CSS, and register its module, like so:

    import { IgrRadio, IgrRadioGroupComponent } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    [!WARNING] The IgrRadio component doesn't work with the standard <form> element. Use Form instead.

    Examples

    Label

    To provide a meaningful label for the IgrRadio, simply place some text between the opening and closing tags:

    <IgrRadio><span>Label</span></IgrRadio>

    You can specify if the label should be positioned before or after the IgrRadio button by setting the label-position attribute. Allowed values are before and after(default):

    <IgrRadio labelPosition="before"><span>Apple</span></IgrRadio>

    The IgrRadio 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.

    <span id="radio-label">Label</span>
<IgrRadio aria-labelledby="radio-label"></IgrRadio>

    Checked

    You can use the checked attribute to toggle on the radio.

    <IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" checked={true}><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    Invalid

    You can use the invalid attribute to mark the radio as invalid.

    <IgrRadio invalid={true}></IgrRadio>

    Disabled

    You can use the disabled attribute to disable the radio.

    <IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" disabled={true}><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    Group Alignment

    The IgrRadioGroup 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.

    <IgrRadioGroup alignment="horizontal">
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" disabled={true}><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    Forms

    You can use the name and value attributes when using the radio with Form.

    <IgrRadioGroup>
  <IgrRadio name="fruit" value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio name="fruit" value="banana"><span>Banana</span></IgrRadio>
  <IgrRadio name="fruit" value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio name="fruit" value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    Styling

    The IgrRadio component exposes several CSS parts (base, control, and label) to give you full control over its styling.

    igc-radio::part(control) {
  --size: 18px;
}

igc-radio-group {
  padding: 12px;
}

igc-radio::part(checked)::after {
  background-color: var(--ig-success-500);
}

igc-radio::part(label) {
  color: var(--ig-secondary-800);
}

    API References

    Additional Resources