Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 38fc15a

Browse files
committed
docs: update content
1 parent c727396 commit 38fc15a

File tree

2 files changed

+68
-68
lines changed

2 files changed

+68
-68
lines changed
Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,71 @@
11
---
2-
title: React Checkbox Components
3-
name: Checkbox
4-
description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
2+
title: React Bootstrap Checkbox Component
3+
name: Checkbox with Bootstrap Styling
4+
description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
55
route: /forms/checkbox/
6-
other_frameworks: checkbox
6+
bootstrap_component: true
77
---
88

9-
## Approach
9+
## How to use React Bootstrap Checkbox component
1010

11-
Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
11+
Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.
1212

13-
##Checkboxes
13+
### Basic example
1414

15-
<ExampleSnippet component="CheckboxExample"componentName="React Form Checkbox" />
15+
Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.
1616

17-
### Indeterminate
17+
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxExample"componentName="React Bootstrap Checkbox" />
1818

19-
Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
19+
### Indeterminate state
2020

21-
<ExampleSnippetcomponent="CheckboxIndeterminateExample"componentName="React Form Checkbox" />
21+
Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
2222

23-
### Disabled
23+
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxIndeterminateExample"componentName="React Bootstrap Checkbox" />
2424

25-
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
25+
### Disabled state
2626

27-
<ExampleSnippetcomponent="CheckboxDisabledExample"componentName="React Form Checkbox" />
27+
Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
2828

29-
## Default (stacked)
29+
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxDisabledExample"componentName="React Bootstrap Checkbox" />
3030

31-
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
31+
### Stacked layout (default)
3232

33-
<ExampleSnippetcomponent="CheckboxStackedExample"componentName="React Form Checkbox" />
33+
By default, multiple checkboxes stack vertically and are spaced evenly.
3434

35-
## Inline
35+
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxStackedExample"componentName="React Bootstrap Checkbox" />
3636

37-
Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
37+
### Inline checkboxes
3838

39-
<ExampleSnippetcomponent="CheckboxInlineExample"componentName="React Form Checkbox" />
39+
Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
4040

41-
## Reverse
41+
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxInlineExample"componentName="React Bootstrap Checkbox" />
4242

43-
Put your checkboxes on the opposite side by adding `reverse` boolean property.
43+
### Reversed checkboxes
4444

45-
<ExampleSnippetcomponent="CheckboxReverseExample"componentName="React Form Checkbox" />
45+
Use the `reverse` prop to position the checkbox on the opposite side of the label.
4646

47-
## Without labels
47+
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxReverseExample"componentName="React Bootstrap Checkbox" />
4848

49-
Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
49+
### Without labels
5050

51-
<ExampleSnippet component="CheckboxWithoutLabelsExample" componentName="React Form Checkbox" />
51+
If omitting a label, remember to include `aria-label` for accessibility compliance.
52+
53+
<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />
5254

5355
## Checkbox toggle buttons
5456

55-
Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
57+
Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
5658

57-
<ExampleSnippet component="CheckboxToggleButtonsExample" componentName="React Form Checkbox" />
59+
<ExampleSnippet className="theme-bootstrap"component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />
5860

59-
### Outlined styles
61+
### Outlined toggle styles
6062

61-
Different variants of button, such at the various outlined styles, are supported.
63+
Use outlined button variants for a lighter, bordered appearance.
6264

63-
<ExampleSnippet component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Form Checkbox" />
65+
<ExampleSnippet className="theme-bootstrap"component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />
6466

65-
## API
67+
## API reference
6668

67-
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
69+
Refer to the API documentation for detailed descriptions of all the available props and configuration options.
6870

6971
- [&lt;CFormCheck /&gt;](../api/#cformcheck)
Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,69 @@
11
---
2-
title: React Bootstrap Checkbox Component
3-
name: Checkbox with Bootstrap Styling
4-
description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
2+
title: React Checkbox Components
3+
name: Checkbox
4+
description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
55
route: /forms/checkbox/
6-
bootstrap_component: true
6+
other_frameworks: checkbox
77
---
88

9-
## How to use React Bootstrap Checkbox component
9+
## Approach
1010

11-
Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.
11+
Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
1212

13-
### Basic example
13+
##Checkboxes
1414

15-
Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.
15+
<ExampleSnippet component="CheckboxExample"componentName="React Form Checkbox" />
1616

17-
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxExample"componentName="React Bootstrap Checkbox" />
17+
### Indeterminate
1818

19-
### Indeterminate state
19+
Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
2020

21-
Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
21+
<ExampleSnippetcomponent="CheckboxIndeterminateExample"componentName="React Form Checkbox" />
2222

23-
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxIndeterminateExample"componentName="React Bootstrap Checkbox" />
23+
### Disabled
2424

25-
### Disabled state
25+
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
2626

27-
Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
27+
<ExampleSnippetcomponent="CheckboxDisabledExample"componentName="React Form Checkbox" />
2828

29-
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxDisabledExample"componentName="React Bootstrap Checkbox" />
29+
## Default (stacked)
3030

31-
### Stacked layout (default)
31+
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
3232

33-
By default, multiple checkboxes stack vertically and are spaced evenly.
33+
<ExampleSnippetcomponent="CheckboxStackedExample"componentName="React Form Checkbox" />
3434

35-
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxStackedExample"componentName="React Bootstrap Checkbox" />
35+
## Inline
3636

37-
### Inline checkboxes
37+
Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
3838

39-
Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
39+
<ExampleSnippetcomponent="CheckboxInlineExample"componentName="React Form Checkbox" />
4040

41-
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxInlineExample"componentName="React Bootstrap Checkbox" />
41+
## Reverse
4242

43-
### Reversed checkboxes
43+
Put your checkboxes on the opposite side by adding `reverse` boolean property.
4444

45-
Use the `reverse` prop to position the checkbox on the opposite side of the label.
45+
<ExampleSnippetcomponent="CheckboxReverseExample"componentName="React Form Checkbox" />
4646

47-
<ExampleSnippetclassName="theme-bootstrap"component="CheckboxReverseExample"componentName="React Bootstrap Checkbox" />
47+
## Without labels
4848

49-
### Without labels
49+
Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
5050

51-
If omitting a label, remember to include `aria-label` for accessibility compliance.
52-
53-
<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />
51+
<ExampleSnippet component="CheckboxWithoutLabelsExample" componentName="React Form Checkbox" />
5452

5553
## Checkbox toggle buttons
5654

57-
Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
55+
Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
5856

59-
<ExampleSnippet className="theme-bootstrap"component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />
57+
<ExampleSnippet component="CheckboxToggleButtonsExample" componentName="React Form Checkbox" />
6058

61-
### Outlined toggle styles
59+
### Outlined styles
6260

63-
Use outlined button variants for a lighter, bordered appearance.
61+
Different variants of button, such at the various outlined styles, are supported.
6462

65-
<ExampleSnippet className="theme-bootstrap"component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />
63+
<ExampleSnippet component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Form Checkbox" />
6664

67-
## API reference
65+
## API
6866

69-
Refer to the API documentation for detailed descriptions of all the available props and configuration options.
67+
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
7068

7169
- [&lt;CFormCheck /&gt;](./api/#cformcheck)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /