docs(read-only): checkbox docs (#3404)

* update usage.mdx

* update style.mdx

* add link to pattern guidance

* chore: format

---------

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/pages/components/checkbox/style.mdx

@@ -27,15 +27,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| Element           | Property   | Color token      |
-| ----------------- | ---------- | ---------------- |
-| Checkbox:focus    | border     | `$focus`         |
-| Label:disabled    | text color | `$text-disabled` |
-| Checkbox:disabled | border     | `$icon-disabled` |
-|                   | background | `$icon-disabled` |
+| State     | Element  | Property   | Color token      |
+| --------- | -------- | ---------- | ---------------- |
+| Focus     | Checkbox | border     | `$focus`         |
+| Disabled  | Label    | text color | `$text-disabled` |
+|           | Checkbox | border     | `$icon-disabled` |
+|           |          | background | `$icon-disabled` |
+| Read-only | Label    | text color | `$text-primary`  |
+|           | Checkbox | border     | `$icon-disabled` |
+|           |          | inner fill | `$icon-primary`  |
 
 <Row>
-<Column colLg={8}>
+<Column colLg={12}>
 
 ![Checkbox interactive states](images/checkbox-style-2.png)
 

src/pages/components/checkbox/usage.mdx

@@ -261,20 +261,23 @@ option selected.
 <Row>
 <Column colLg={8}>
 
-![Unselected, selected and indeterminate states of checkbox.](images/checkbox-usage-7.png)
+![Unselected, selected, and indeterminate states of checkbox.](images/checkbox-usage-7.png)
 
 </Column>
 </Row>
 
 Use the indeterminate state when the checkbox contains a sublist of selections,
 some of which are selected, and some unselected. In addition to unselected,
-selected, and indeterminate states, checkboxes also have states for focus and
-disabled.
+selected, and indeterminate states, checkboxes also have states for focus,
+disabled, and read-only. When deciding whether to use a disabled or read-only
+state for checkboxes, see our
+[Read-only states pattern](https://carbondesignsystem.com/patterns/read-only-states-pattern/)
+guidance.
 
 <Row>
-<Column colLg={8}>
+<Column colLg={12}>
 
-![Focus and disabled states of checkbox.](images/checkbox-usage-8.png)
+![Focus, disabled, and read-only states of checkbox.](images/checkbox-usage-8.png)
 
 </Column>
 </Row>