Package-level declarations
Switches can be used in forms on a full page, in modals, or on side panels. They can be used in a list but we shouldn’t mix them with other components such as ./CheckBox.md or ./RadioButton.md.
Switches must respect the established color code and not use other colors to emphasize the activation and deactivation of a functionality or service.
Switch component allows the user to activate or deactivate the state of an element or concept. It is usually used as an element to add services, activate functionalities or adjust settings. It is also used to control binary options (On/Off or True/False).
SwitchLabelled
Part | ||
Pro |
The minimal usage of the component is a standalone checkbox but you can add a label using Switch.kt. Please refer to design specs to find what content is accepted.
An icon can be added on the left or right of label.
A caption can be added in different positions of the label in order to to expand the information.
var checked by remember { mutableStateOf(false) }
SwitchLabelled(
checked = checked,
onCheckedChange = {
checked = !checked
}
) { Text(text = "Switch On") }
Styles
The Switch
and SwitchLabelled
accept the following ToggleIntent.kts:
Basic (default)
Accent
Main
Support
Success
Alert
Danger
Info
Neutral
Layout
The Switch respects the minimum touch size.
Switch labels can be positioned at the Left or the Right, but usually the left position is more often used on small screens and mobile devices.
SwitchGroup
🚀 TODO We plan to provide a layout composable to make it easier to follow the design specs.
The radio button allow users to select one option from a set.
Use radio buttons to select a single option from a list
It should be visible at a glance if a radio button has been selected, and selected items should be more visually prominent than unselected items.
Present a list showing all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
The minimal usage of the component is the radio button in standalone but you can add a content at the end of the radio or customize it.
var selected by remember { mutableStateOf(true) }
RadioButton(
selected = selected,
onClick = {
selected = !selected
}
)
CheckBoxLabelled
The main radio button allow users to select one option from a set.
Use radio buttons to select a single option from a list
It should be visible at a glance if a radio button has been selected, and selected items should be more visually prominent than unselected items.
Present a list showing all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
The minimal usage of the component is the radiobutton in standalone but you can add a content at the end of the box or customize it.
var selected by remember { mutableStateOf(true) }
RadioButtonLabelled(
selected = selected,
onClick = {
selected = !selected
}
) { Text("RadioButton On") }
Styles
The RadioButton
and RadioButtonLabelled
accept the following ToggleIntent.kts:
Basic (default)
Accent
Main
Support
Success
Alert
Danger
Info
Neutral
Layout
RadioGroup
🚀 TODO We plan to provide a layout composable to make it easier to follow the design specs.
@Composable
fun RadioGroupSample() {
val radioOptions = listOf("Calls", "Missed", "Friends")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
// Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
Column(Modifier.selectableGroup()) {
radioOptions.forEach { text ->
RadioButtonLabelled(
selected = text == selectedOption,
onClick = { selectedOption(text) },
) { Text(text) }
}
}
}
Form states 🚀 TODO
Checkboxes allows users to select one or more items from a set. Checkboxes can turn an option on or off.
Toggle a single item on or off.
Require another action to activate or deactivate something.
In cases of a global activation in a indeterminate state where on and off states coexist in the children.
The minimal usage of the component is the checkbox in standalone but you can add a content at the end of the box or customize it.
var checkedState by remember { mutableStateOf(ToggleableState.On) }
Checkbox(
state = checkedState,
onCheckedChange = {
isChecked = !isChecked
}
)
CheckBoxLabelled
The Checkbox allows users to select one or more items from a set. Checkboxes can turn an option on or off.
The minimal usage of the component is the checkbox in standalone but you can add a content at the end of the box or customize it.
var checkedState by remember { mutableStateOf(ToggleableState.On) }
CheckboxLabelled(
state = checkedState,
onClick = {},
) { Text("CheckBox On") }
Styles
The CheckBox
and CheckboxLabelled
accept the following ToggleIntent.kts:
Basic (default)
Accent
Main
Support
Success
Alert
Danger
Info
Neutral
Layout
CheckBoxGroup
🚀 TODO We plan to provide a layout composable to make it easier to follow the design specs.
@Composable
fun CheckboxSample() {
Column {
// define dependent checkboxes states
val (state, onStateChange) = remember { mutableStateOf(ToggleableState.On) }
val (state2, onStateChange2) = remember { mutableStateOf(ToggleableState.On) }
// TriStateCheckbox state reflects state of dependent checkboxes
val parentState = remember(state, state2) {
if (state && state2) ToggleableState.On
else if (!state && !state2) ToggleableState.Off
else ToggleableState.Indeterminate
}
// click on TriStateCheckbox can set state for dependent checkboxes
val onParentClick = {
val s = parentState != ToggleableState.On
onStateChange(s)
onStateChange2(s)
}
Option(
state = parentState,
onClick = onParentClick,
)
Column(modifier = Modifier.selectableGroup()) {
Option(state, onStateChange)
Option(state2, onStateChange2)
}
}
}
@Composable
fun Option(
option: String,
onClick: (() -> Unit)
) {
CheckboxLabelled(
state = checkedState,
onClick = onClick,
) { Text(option) }
}
Form states 🚀 TODO
Types
Functions
Checkboxes allows users to select one or more items from a set. Checkboxes can turn an option on or off.
Checkboxes allows users to select one or more items from a set. Checkboxes can turn an option on or off.
Radio buttons allow users to select one option from a set.
Radio buttons allow users to select one option from a set.
Switch component allows the user to activate or deactivate the state of an element or concept. It is usually used as an element to add services, activate functionalities or adjust settings. It is also used to control binary options (On/Off or True/False).
Switches are the preferred way to adjust settings. They're used to control binary options – think On/Off or True/False.