Skip to content

Commit 38fc15a

Browse files
mrholekmrholek
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

‎packages/docs/content/forms/checkbox/bootstrap.mdx

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+
<ExampleSnippet className="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-
<ExampleSnippet component="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+
<ExampleSnippet className="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-
<ExampleSnippet component="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+
<ExampleSnippet className="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-
<ExampleSnippet component="CheckboxStackedExample" componentName="React Form Checkbox" />
33+
By default, multiple checkboxes stack vertically and are spaced evenly.
3434

35-
## Inline
35+
<ExampleSnippet className="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-
<ExampleSnippet component="CheckboxInlineExample" componentName="React Form Checkbox" />
39+
Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
4040

41-
## Reverse
41+
<ExampleSnippet className="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-
<ExampleSnippet component="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+
<ExampleSnippet className="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)

‎packages/docs/content/forms/checkbox/index.mdx

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-
<ExampleSnippet className="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+
<ExampleSnippet component="CheckboxIndeterminateExample" componentName="React Form Checkbox" />
2222

23-
<ExampleSnippet className="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+
<ExampleSnippet component="CheckboxDisabledExample" componentName="React Form Checkbox" />
2828

29-
<ExampleSnippet className="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+
<ExampleSnippet component="CheckboxStackedExample" componentName="React Form Checkbox" />
3434

35-
<ExampleSnippet className="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+
<ExampleSnippet component="CheckboxInlineExample" componentName="React Form Checkbox" />
4040

41-
<ExampleSnippet className="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+
<ExampleSnippet component="CheckboxReverseExample" componentName="React Form Checkbox" />
4646

47-
<ExampleSnippet className="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)