Skip to content

Commit

Permalink
[#638] Update checkboxes documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
paulinea committed Oct 6, 2023
1 parent a160499 commit 9fe545d
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 27 deletions.
34 changes: 13 additions & 21 deletions docs/components/Checkboxes.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ description: Checkbox selection control allows the user to select options.
---

Use checkboxes to:

* Select one or more options from a list
* Present a list containing sub-selections
* Turn an item on or off in a desktop environment
Expand All @@ -24,7 +25,6 @@ Use checkboxes to:

- [Design System Manager - Selection controls](https://system.design.orange.com/0c1af118d/p/14638a-selection-controls/b/352c00)
- [Material Design - Checkboxes](https://material.io/components/checkboxes/)
- Technical documentation soon available

## Accessibility

Expand All @@ -38,34 +38,26 @@ Additional content labels are usually unnecessary.

![Checkbox](images/checkbox_light.png) ![Checkbox dark](images/checkbox_dark.png)

> **Jetpack Compose implementation**
#### Jetpack Compose

In your composable screen you can use:

```kotlin
var checked by remember { mutableStateOf(false) }
OdsCheckbox(
checked = true,
onCheckedChange = { },
enabled = true,
checked = checked,
onCheckedChange = { checked = it },
enabled = true
)
```

> **XML implementation**
To create a Checkbox you just have to add a `Checkbox` in your layout. Orange theme will be
automatically applied

In the layout:

```xml

<CheckBox
android:layout_width="match_parent"
android:layout_height="match_parent"
android:checked="true"
android:text="@string/label"
/>
```
Parameter | Default value | Description
-- | -- | --
`checked: Boolean` | | Controls the checked state of the checkbox
`onCheckedChange: ((Boolean) -> Unit)?` | | Callback called on checkbox click. If `null`, then this is passive and relies entirely on a higher-level component to control the checked state.
`modifier: Modifier` | `Modifier` | `Modifier` to be applied to the checkbox
`enabled: Boolean` | `true` | Controls the enabled state of the checkbox. When `false`, this checkbox will not be clickable.
{:.table}

## Component specific tokens

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,11 @@ import com.orange.ods.compose.utilities.extension.enable
* or off.
*
*
* @param checked whether Checkbox is checked or unchecked
* @param onCheckedChange callback to be invoked when checkbox is being clicked,
* therefore the change of checked state in requested. If null, then this is passive
* and relies entirely on a higher-level component to control the "checked" state.
* @param modifier Modifier to be applied to the layout of the checkbox
* @param enabled whether the component is enabled or grayed out
* @param checked Controls the checked state of the checkbox
* @param onCheckedChange Callback called on checkbox click. If `null`, then this is passive and relies entirely on a higher-level component to control
* the checked state.
* @param modifier [Modifier] to be applied to the layout of the checkbox
* @param enabled Controls the enabled state of the checkbox. When `false`, this checkbox will not be clickable.
*/
@Composable
@OdsComposable
Expand Down

0 comments on commit 9fe545d

Please sign in to comment.