Control

Updated: Oct 7, 2024

Overview

Control components allow users to make selections or toggle settings. The Meta Horizon OS UI Set provides standard controls adapted for spatial UIs.

Shows both the control UI code and how UI controls are rendered.

Checkbox (`SpatialCheckbox`)

Checkboxes allow the user to select one or more items from a set, or to turn an option on or off.

Composable: SpatialCheckbox

Usage: Use for multi-selection lists or standalone boolean options (for example, “Remember me”).

State: checked: Boolean, onCheckedChange: ((Boolean) -> Unit)?

Appearance: A square box that shows a checkmark when selected. Uses CheckboxDefaults and SpatialTheme for colors.

import com.meta.spatial.uiset.control.SpatialCheckbox
import androidx.compose.runtime.*
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text

var isChecked by remember { mutableStateOf(false) }

Row(verticalAlignment = Alignment.CenterVertically) {
    SpatialCheckbox(
        checked = isChecked,
        onCheckedChange = { isChecked = it }
    )
    Text("Enable Feature")
}

// Disabled Checkbox
SpatialCheckbox(checked = true, onCheckedChange = null, enabled = false)

Radio button (`SpatialRadioButton`)

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Composable: SpatialRadioButton

Usage: Use when only one option from a list can be selected at a time. Often used in groups where selecting one deselects others (logic managed externally).

State: selected: Boolean, onClick: (() -> Unit)?

Appearance: A circle that shows an inner dot when selected. Uses RadioButtonDefaults and SpatialTheme for colors.

import com.meta.spatial.uiset.control.SpatialRadioButton
import androidx.compose.runtime.*
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val options = listOf("Option A", "Option B", "Option C")
var selectedOption by remember { mutableStateOf(options[0]) }

Column(Modifier.selectableGroup()) { // Group for accessibility
    options.forEach { text ->
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(vertical = 4.dp)
        ) {
            SpatialRadioButton(
                selected = (text == selectedOption),
                onClick = { selectedOption = text }
            )
            Text(text = text, modifier = Modifier.padding(start = 8.dp))
        }
    }
}

// Disabled RadioButton
SpatialRadioButton(selected = false, onClick = null, enabled = false)

Switch (`SpatialSwitch`)

Switches toggle the state of a single setting on or off.

Composable: SpatialSwitch

Usage: Use for binary settings or options (for example, “Wi-Fi On/Off”, “Notifications Enabled/Disabled”).

State: checked: Boolean, onCheckedChange: ((Boolean) -> Unit)?

Appearance: A track with a draggable thumb that slides to indicate the on/off state. Includes an optional check icon within the thumb when ‘on’. Uses SwitchDefaults and SpatialTheme for colors.

import com.meta.spatial.uiset.control.SpatialSwitch
import androidx.compose.runtime.*
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text

var isEnabled by remember { mutableStateOf(true) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Text("Enable Advanced Settings")
    Spacer(Modifier.width(16.dp))
    SpatialSwitch(
        checked = isEnabled,
        onCheckedChange = { isEnabled = it }
    )
}

// Disabled Switch
SpatialSwitch(checked = true, onCheckedChange = null, enabled = false)

Common parameters

enabled: Boolean = true: Controls interactability and visual state for all controls.

modifier: Modifier = Modifier: Standard Compose modifier.

Interaction callbacks (onCheckedChange, onClick): Set to null to make the control non-interactive.

Did you find this page helpful?

Control

Overview

Checkbox (SpatialCheckbox)

Radio button (SpatialRadioButton)

Switch (SpatialSwitch)

Common parameters

Checkbox (`SpatialCheckbox`)

Radio button (`SpatialRadioButton`)

Switch (`SpatialSwitch`)