OudsSwitchItem
Switches allow the user to toggle between two states, typically "on" and "off". They are represented as sliders that change their position or color to indicate the current state. Switches are used to enable or disable features, options, or settings in an intuitive and visual manner.
The switch item variant can function as a simple input with a label, or it can be combined with optional elements such as description, a divider, or an icon, allowing it to suit various use cases. It can be used in a list as a list item or as a single element to validate general conditions, for example.
The OUDS switch item layout contains an OudsSwitch. By clicking the switch item, the user changes the checked state of its switch.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.5.0 |
Parameters
Controls the checked state of the item's switch.
The main label of the switch item.
Callback invoked on switch item click. If null, then this is passive and relies entirely on a higher-level component to control the checked state.
Modifier applied to the layout of the switch item.
Optional text displayed below the label.
Optional icon displayed in the item. By default, it has a leading position. If reversed is set to true, it is displayed as a trailing element.
Controls the horizontal layout of the item. When true, the item is designed to span the full width of the screen or container. When false, it is adapted for use within constrained layouts or containers with their own padding. Defaults to true.
Controls the display of a divider at the bottom of the switch item.
When false, the switch has a trailing position and the optional icon has a leading position. Otherwise, it is reversed.
Controls the enabled state of the switch item. When false, the switch, the texts and the optional icon are disabled, and the item will not be clickable.
Controls the read-only state of the switch item. When true, the item's switch is disabled but the texts and the icon remain in the enabled color. Note that if it is set to true and enabled is set to false, the switch item will be displayed in the disabled state.
Optional OudsError to provide if the switch item should appear in an error state, null otherwise.
When true, the item width is constrained to a maximum value defined by the design system. When false, no specific width constraint is applied, allowing the component to size itself or follow external modifiers. Defaults to false.
Optional hoisted MutableInteractionSource for observing and emitting Interactions for the item's switch. Note that if null is provided, interactions will still happen internally.
See also
If you want to use a standalone switch.
Samples
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsSwitchItem
import com.orange.ouds.core.utilities.OudsPreview
fun main() {
//sampleStart
OudsPreview {
var checked by remember { mutableStateOf(true) }
OudsSwitchItem(
checked = checked,
label = "Notifications",
description = "Display app notifications in the notification center",
onCheckedChange = { value -> checked = value },
divider = false
)
}
//sampleEnd
}