Boolean

A Boolean variable stores one of two values: true or false. It's fundamental for controlling logic, toggling states, managing visibility, and making decisions in your app.

When to Use

Use Boolean variables when you need to:

• Toggle UI elements on/off (visibility, enabled state)

• Track binary states (loading, error, success)

• Control conditional rendering

• Manage user preferences (notifications enabled, dark mode)

• Store checkbox or switch states

• Flag conditions or states

Values

true
false

Common Use Cases

1. Toggling Visibility

Show or hide widgets based on a boolean state:

Variable: isMenuOpen (Boolean)
Initial Value: false

On Menu Button Click:
  Set State: isMenuOpen = ${not(isMenuOpen)}

Container Widget:
  Visible: ${isMenuOpen}

2. Loading States

Track when data is being fetched:

Variable: isLoading (Boolean)
Initial Value: false

On Page Load:
  Set State: isLoading = true
  API Call: fetchData
    On Success:
      Set State: isLoading = false

Conditional Builder:
  Condition: ${isLoading}
  True: CircularProgressBar
  False: DataList

3. Form Validation

Track whether a form is valid:

Variable: isFormValid (Boolean)
Value: ${and(gt(userName.length, 0), contains(email, '@'))}

Button:
  Enabled: ${isFormValid}

4. Switch and Checkbox States

Store toggle states:

Variable: notificationsEnabled (Boolean)
Initial Value: true

Switch Widget:
  Value: ${notificationsEnabled}
  On Change:
    Set State: notificationsEnabled = ${currentValue}

5. Feature Flags

Control feature availability:

Variable: showBetaFeature (Boolean)
Initial Value: false

Container (Beta Feature):
  Visible: ${showBetaFeature}

Working with Booleans

Logical NOT (Toggle)

Flip a boolean value using the not() function:

${not(isChecked)}
${not(isMenuOpen)}

Logical AND

Both conditions must be true using the and() function:

${and(isLoggedIn, hasPermission)}
${and(gt(userName.length, 0), contains(email, '@'))}

Logical OR

At least one condition must be true using the or() function:

${or(isAdmin, isModerator)}
${or(hasEmailVerified, hasPhoneVerified)}

Comparisons

Comparison operations return boolean values:

${gte(age, 18)}
${lt(price, 100)}
${isEqual(userName, 'admin')}
${gt(items.length, 0)}

Conditional Operator

Use the if() function to conditionally select values:

${if(isLoggedIn, 'Logout', 'Login')}
${if(hasError, errorMessage, 'Success')}
${if(gt(count, 0), count, 'None')}

Boolean Logic Patterns

Multiple Conditions (AND)

All must be true using nested and() functions:

Variable: canSubmit (Boolean)
Value: ${and(and(isFormValid, not(isLoading)), termsAccepted)}

Any Condition (OR)

At least one must be true using or() function:

Variable: showWarning (Boolean)
Value: ${or(or(hasError, hasWarning), isExpired)}

Complex Logic

Combine multiple operations:

Variable: canEdit (Boolean)
Value: ${and(or(isOwner, isAdmin), and(not(isLocked), not(isArchived)))}

Negation

Invert a condition using not() function:

Variable: isEmpty (Boolean)
Value: ${isEqual(items.length, 0)}

Variable: hasItems (Boolean)
Value: ${not(isEmpty)}

Best Practices

• Use descriptive names: Prefix with is, has, can, should (e.g., isLoading, hasError, canEdit)

• Initialize clearly: Always set an explicit initial value (true or false)

• Avoid double negatives: Instead of !isNotValid, use isValid

• Use for clarity: Even if you could use numbers (0/1), booleans make intent clearer

• Default to false for flags: For safety, default feature flags and permissions to false

• Combine logically: Use && and || to create complex conditions from simple booleans

• Keep conditions simple: Break complex boolean logic into multiple smaller variables for readability

Common Naming Patterns

State Flags

isLoading
isError
isSuccess
isActive
isSelected
isExpanded

Capabilities

canEdit
canDelete
canView
canSubmit

Properties

hasItems
hasError
hasPermission
hasNextPage

User Actions

shouldRefresh
shouldValidate
shouldShowDialog

Related Documentation

• Logical Operators - Boolean logic and comparisons

• Conditional Builder - Conditional rendering based on booleans

• Switch - UI widget for boolean values

• Check Box - Checkbox input for boolean states

• Variables Overview - Learn about all variable types