Design
Selectors
Selectors enable users to toggle between two distinct states, such as on and off, by using visual cues to differentiate each state.
Resources
Download the Meta Horizon OS UI Set in Figma or Unity to start building with customizable, production-ready components.
Design | Open in Figma. Change themes for specific components or entire pages and customize elements to fit your design system. |
Implementation | Download the Meta Interaction SDK (Unity) to use the Meta horizon OS UI Set. Elements are customizable and support multiple input modalities. |
Types
Checkboxes
A checkbox is a UI input that allows users to select one or multiple options presented.
- Anatomy: Checkboxes are paired with text, which is placed to the right of the checkbox and should be left-aligned.
- States: A checkbox is considered selected when it contains a checkmark, ‘x,’ or other object inside the box, and unselected if empty.
Checkboxes can be used as a single action to confirm an action (e.g., “I have read the terms and conditions”) or to present multiple items to users.
Toggles
A toggle is a switch that can be activated between two modes: on and off. Depending on the event, toggles may be pre-set on or off for the user. Generally, toggles are used for setting controls.
- Anatomy: Toggles usually stand alone without text. The description of the state being toggled should display to its left.
- States: Toggles may be presented as inactive or active in a system. Inactive toggles are used when the system aims to communicate the availability of a setting without yet releasing the ability to use said toggle.
Radio buttons are used when there are multiple choices present, but users are only to select one option at a time.
- Anatomy: Radio buttons are paired with text, which is placed the right of the radio button, and should be left aligned. In general, radio buttons should be stacked vertically to help differentiate between states.
- States: Radio buttons are expressed as a circle and have two states, selected and unselected.
Did you find this page helpful?
Build with Meta
Virtual reality / Meta Horizon
Support and legal
Build with Meta
Virtual reality / Meta Horizon
Support and legal
Build with Meta
Virtual reality / Meta Horizon
Support and legal
English (US)
©2024 Meta