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
falseCommon 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: DataList3. 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 (
trueorfalse)Avoid double negatives: Instead of
!isNotValid, useisValidUse 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
falseCombine logically: Use
&&and||to create complex conditions from simple booleansKeep conditions simple: Break complex boolean logic into multiple smaller variables for readability
Common Naming Patterns
State Flags
isLoading
isError
isSuccess
isActive
isSelected
isExpandedCapabilities
canEdit
canDelete
canView
canSubmitProperties
hasItems
hasError
hasPermission
hasNextPageUser Actions
shouldRefresh
shouldValidate
shouldShowDialogRelated 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
Last updated