Conditions & States

How do conditional states work?

Whereas conditions have a single logical result (true of false) - a conditional state is the combined result of multiple conditions at any given time. By creating an application with multiple conditions, and allowing the user to control the variables that those conditions are referencing - you can create infinitely complex workflows and rich user experiences.

If you have 10 conditions, your application can be in 1,024 unique conditional states.

Some examples of conditions :

Show a personalized message to users based on their country.

Hide some content if a user isn't a member.

Hide some content if an input is empty.

Reduce the size or padding of a block on a mobile screen.

Change the number of columns on a smaller screen.

Change a color to indicate a status.

Reduce opacity if a value is empty.

Apply a background to indicate a selection

Apply a border on hover.

⁠

Types of Conditions

Conditons fall under these main categories, though in reality all conditions are purely logical - meaning they always return either true or false.

⁠

⁠

Managing State

Managing Conditions

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.