React 체크박스 개요

React Checkbox는 React 앱에 체크박스를 추가할 수 있는 구성 요소입니다. 표준 HTML 체크박스처럼 작동하여 사용자가 기본 선택 및 선택 취소 상태 또는 추가 불확정 상태를 선택할 수 있습니다. 또한 React 체크박스 구성 요소의 스타일을 완벽하게 제어하고 양식과 함께 사용할 수 있습니다.

Checkbox Example

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrCheckbox>
                    <span key="checkboxLabel">Checkbox</span>
                </IgrCheckbox>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxOverview/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Usage

기본적으로 IgrCheckbox 선택됨/선택 취소됨 상태 중에서 선택할 수 있습니다. 기본 스타일은 머티리얼 디자인 지침의 선택 제어 사양에 따라 수행됩니다.

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

npm install igniteui-react
cmd

그런 다음 필요한 CSS인 IgrCheckbox 가져와서 다음과 같이 모듈을 등록해야 합니다.

import { IgrCheckboxModule, IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();
tsx

​IgrCheckbox 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

<IgrCheckbox></IgrCheckbox>
tsx

The IgrCheckbox component doesn't work with the standard <form> element. Use Form instead.

Examples

Label

확인란에 의미 있는 레이블을 제공하려면 여는 태그와 닫는 태그 사이에 텍스트를 배치하면 됩니다.

<IgrCheckbox><span>Label</span></IgrCheckbox>
tsx

확인란의 label-position 속성을 설정하여 레이블을 확인란 토글 앞 또는 뒤에 배치해야 하는지 지정할 수 있습니다. 허용되는 값은 before과 after 입니다(기본값):

<IgrCheckbox labelPosition="before"></IgrCheckbox>
tsx

확인란은 확인란 외부의 요소로 레이블을 지정할 수도 있습니다. 이 경우 사용자는 필요에 따라 라벨의 위치와 스타일을 지정할 수 있는 모든 권한을 갖게 됩니다.

<span id="checkbox-label">Label</span>
<IgrCheckbox ariaLabelledby="checkbox-label" labelPosition="before"></IgrCheckbox>
tsx

EXAMPLE

TSX

CheckboxLabelStyles.css

index.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CheckboxLabelStyles.css'
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxLabel extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <div className="wrapper">
                    <span id="checkbox-label">Label</span>
                    <IgrCheckbox aria-labelledby="checkbox-label" labelPosition="before"></IgrCheckbox>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxLabel/>);
tsxコピー

.wrapper {
    display: flex;
    align-items: center;
}cssコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Checked

구성 요소의 checked 속성을 사용하여 확인란을 기본적으로 켜거나 끌지 여부를 결정할 수 있습니다.

<IgrCheckbox checked="true"></IgrCheckbox>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxChecked extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrCheckbox checked={true}>
                    <span key="checkboxLabel">Label</span>
                </IgrCheckbox>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxChecked/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Indeterminate

구성 요소의 indeterminate 속성을 사용하여 확인란의 값을 true 또는 false로 설정할 수 없습니다.

<IgrCheckbox indeterminate="true"></IgrCheckbox>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxIndeterminate extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrCheckbox indeterminate={true}>
                    <span key="checkboxLabel">Label</span>
                </IgrCheckbox>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxIndeterminate/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Required

​required 속성을 사용하여 확인란을 필수로 표시할 수 있습니다.

<IgrCheckbox required="true"></IgrCheckbox>
tsx

Invalid

​invalid 속성을 사용하여 확인란을 잘못된 것으로 표시할 수 있습니다.

<IgrCheckbox invalid="true"></IgrCheckbox>
tsx

Disabled

​disabled 속성을 사용하여 확인란을 비활성화할 수 있습니다.

<IgrCheckbox disabled="true"></IgrCheckbox>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxDisabled extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrCheckbox disabled={true}>
                    <span key="checkboxLabel">Label</span>
                </IgrCheckbox>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxDisabled/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Forms

확인란을 사용할 때 and 속성을 사용할 name 수 있습니다 Form. value​

<IgrCheckbox name="wifi" value="enabled"></IgrCheckbox>
tsx

Styling

이 컴포넌트는 IgrCheckbox 스타일링에 사용할 수 있는 4개의 CSS 부분을 노출합니다.

이름	설명
base	확인란의 기본 래퍼입니다.
control	확인란 입력 요소입니다.
indicator	확인란 표시기 아이콘입니다.
label	확인란 레이블입니다.

이 네 가지 CSS 부분을 통해 Checkbox 스타일을 완전히 제어할 수 있습니다.

igc-checkbox::part(indicator) {
  stroke: var(--ig-secondary-500-contrast);
}

igc-checkbox::part(control checked)::after {
  border-radius: 4px;
  background: var(--ig-secondary-500);
}
css

EXAMPLE

Edit in: Codesandbox

API References

• IgrCheckbox
• checked
• disabled
• Styling & Themes

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub