完全に書き直されたチェックコンポーネントを使用して、一貫性のあるクロスブラウザおよびクロスデバイスのチェックボックスとラジオを作成します。
テキスト以外のチェックボックスとラジオコントロールの場合、`FormCheck`は、追加のスタイル設定と改善されたレイアウトを追加する両方のタイプに対応する単一のコンポーネントを提供します。
デフォルト（積み重ね）
デフォルトでは、直接の兄弟要素である任意の数のチェックボックスとラジオボタンは、`FormCheck`で垂直に積み重ねられ、適切に間隔が空けられます。
import Form from 'react-bootstrap/Form';
function CheckExample() {
return (
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={`default-${type}`} className="mb-3">
<Form.Check
type={type}
id={`default-${type}`}
label={`default ${type}`}
/>
<Form.Check
disabled
type={type}
label={`disabled ${type}`}
id={`disabled-default-${type}`}
/>
</div>
))}
</Form>
);
}
export default CheckExample;
スイッチ
スイッチにはカスタムチェックボックスのマークアップがありますが、トグルスイッチをレンダリングするために `type="switch"`を使用します。スイッチは、`<FormCheck>`と同じカスタマイズ可能な子もサポートします。
import Form from 'react-bootstrap/Form';
function SwitchExample() {
return (
<Form>
<Form.Check
type="switch"
id="custom-switch"
label="Check this switch"
/>
<Form.Check
disabled
type="switch"
label="disabled switch"
id="disabled-custom-switch"
/>
</Form>
);
}
export default SwitchExample;
上記を非常に小さなコンポーネントラッパーにカプセル化した `<Form.Switch>`エイリアスを使用することもできます。
インライン
`inline`プロパティを追加して、チェックボックスまたはラジオを同じ水平行にグループ化します。
import Form from 'react-bootstrap/Form';
function CheckInlineExample() {
return (
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={`inline-${type}`} className="mb-3">
<Form.Check
inline
label="1"
name="group1"
type={type}
id={`inline-${type}-1`}
/>
<Form.Check
inline
label="2"
name="group1"
type={type}
id={`inline-${type}-2`}
/>
<Form.Check
inline
disabled
label="3 (disabled)"
type={type}
id={`inline-${type}-3`}
/>
</div>
))}
</Form>
);
}
export default CheckInlineExample;
リバース
`reverse`プロパティを使用して、チェックボックス、ラジオボタン、スイッチを反対側に配置します。
import Form from 'react-bootstrap/Form';
function CheckReverseExample() {
return (
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={`reverse-${type}`} className="mb-3">
<Form.Check
reverse
label="1"
name="group1"
type={type}
id={`reverse-${type}-1`}
/>
<Form.Check
reverse
label="2"
name="group1"
type={type}
id={`reverse-${type}-2`}
/>
<Form.Check
reverse
disabled
label="3 (disabled)"
type={type}
id={`reverse-${type}-3`}
/>
</div>
))}
</Form>
);
}
export default CheckReverseExample;
ラベルなし
ラベル（`children`なし）なしでFormCheckをレンダリングすると、入力が折りたたまれないようにするために、いくつかの追加のスタイルが適用されます。
ラベルを省略する場合は、必ず`aria-label`を追加してください！
import Form from 'react-bootstrap/Form';
function NoLabelExample() {
return (
<>
<Form.Check aria-label="option 1" />
<Form.Check type="radio" aria-label="radio 1" />
</>
);
}
export default NoLabelExample;
より厳密な制御が必要な場合、または`FormCheck`コンポーネントのレンダリング方法をカスタマイズしたい場合は、構成要素を直接使用する方が良い場合があります。
`FormCheck`に`children`を提供することで、デフォルトのレンダリングを回避し、自分で処理できます。（`FormCheck`または`FormGroup`に`id`を提供し、それをラベルと入力に伝播させることもできます）。
import Form from 'react-bootstrap/Form';
function CheckApiExample() {
return (
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={type} className="mb-3">
<Form.Check type={type} id={`check-api-${type}`}>
<Form.Check.Input type={type} isValid />
<Form.Check.Label>{`Custom api ${type}`}</Form.Check.Label>
<Form.Control.Feedback type="valid">
You did it!
</Form.Control.Feedback>
</Form.Check>
</div>
))}
</Form>
);
}
export default CheckApiExample;
API