复选框和单选按钮

使用我们完全重写的复选框组件创建一致的跨浏览器和跨设备复选框和单选按钮。

对于非文本的复选框和单选按钮控件，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 // prettier-ignore 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;

import Form from 'react-bootstrap/Form';

function CheckExample() {
  return (
    <Form>
      {['checkbox', 'radio'].map((type) => (
        <div key={`default-${type}`} className="mb-3">
          <Form.Check // prettier-ignore
            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 // prettier-ignore type="switch" id="custom-switch" label="Check this switch" /> <Form.Check // prettier-ignore disabled type="switch" label="disabled switch" id="disabled-custom-switch" /> </Form> ); } export default SwitchExample;

import Form from 'react-bootstrap/Form';

function SwitchExample() {
  return (
    <Form>
      <Form.Check // prettier-ignore
        type="switch"
        id="custom-switch"
        label="Check this switch"
      />
      <Form.Check // prettier-ignore
        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;

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;

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;

无标签

当您渲染没有标签的 FormCheck（没有children）时，会应用一些额外的样式以防止输入折叠。

省略标签时，请务必添加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;

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组件的渲染方式时，最好直接使用它的组成部分。

通过向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;

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

FormCheck

FormCheckInput

FormCheckLabel