Skip to main content

States

Using States allow you to define different visual and behavioral conditions for UI elements. Using states, you can create interactive components that respond to user actions like clicks, checks, or focus events.

Accessing states​

The States section is located in the Inspector panel when an element is selected. Each element has a "Default" state by default, and you can add additional states as needed.

Available states​

The Editor offers the following states:

  • Default: The standard appearance of an element
  • Checked: Applied when a checkbox, radio button, or similar element is selected
  • Focused: Applied when an element receives focus (e.g., via keyboard navigation)
  • Focus key: Applied when an element is focused using a key
  • Edited: Applied to input fields or text areas that have been modified
  • Hovered: Applied when the cursor hovers over an element
  • Pressed: Applied when an element is being clicked/pressed
  • Scrolled: Applied to scrollable elements that have been scrolled
  • Disabled: Applied when an element is not interactive
  • User 1-4: Custom states that can be defined by the user for specific needs

thermostat

Combined states​

States can be combined to create more complex interactions, for example:

  • Checked + Pressed: Applied when a checked element is also being pressed

Adding states​

To add states to an element:​

  1. Select the element in the canvas
  2. In the Inspector panel, locate the States section
  3. Click the "+" button to the right of the States header
  4. A list titled "Add states" will appear
  5. Use the search bar at the top to filter available states if needed
  6. Click on one or more states to select them (selected states will appear with a green checkmark)
  7. Click the "Create states" button at the bottom of the dialog
  8. The selected states will be added to the element in the States section

State combinations:​

  • If you select only one state from the list, it will be added as an individual state
  • If you select multiple states at once (e.g., "Checked" and "Pressed"), the system will automatically create combined states
  • You can create any combination of states by selecting them simultaneously in the Add states list
  • States that have already been added to an element cannot be added again

thermostat

Removing states​

To remove a state from an element:

  1. Select the element in the canvas
  2. In the Inspector panel, locate the States section
  3. Find the state you want to remove
  4. Click the "-" button that appears on the right side of the state row

Customizing states​

Each state can be customized with different visual properties. When a state is selected in the States panel:

  1. You can modify the element's appearance specifically for that state
  2. Changes will only apply to the selected state
  3. For more advanced styling options, you can use the Styles panel
    • Global styles can be applied to maintain consistency
    • Different Style types can be used to customize properties like colors, typography, and transitions