Boolean Values

✅ Boolean Values

Boolean variables use simple true/false logic to control states, visibility, and interactivity. They’re one of the most powerful variable types in the Universal Design System (UDS) because they allow you to dynamically toggle layers, variants, and behaviors without needing to detach components or build redundant states.

We use Boolean properties extensively to support accessibility, clarity, and structured logic in our system. Here’s how.

---

🧠 What Boolean Variables Do

Boolean variables are used to:

• Control the visibility of layers (e.g., icons, labels, error messages)

• Switch between variant states like selected or expanded

• Enable/disable interactivity or conditional styling

---

🛠 Applied To:

• Variant properties (e.g. is-selected, is-required)

• Layer visibility toggles (e.g. icons or helper text inside a component)

• Semantic toggles like expanded/collapsed, outlined/solid

Boolean properties allow for smart, logic-driven components that don’t rely on visuals alone.

---

🔄 Common Boolean Properties in UDS

🟦 is-selected

Used in toggles, pills, checkboxes, switches, and multiselect controls.

Value	Behavior
true	Component enters a selected or active state
false	Component is not selected, in its default state

Effects may include:

• Displaying a checkmark icon

• Changing color values for border/content/surface

• Applying active/focus styles

🎯 Used in: Pills, switches, tab items, multiselect lists

---

🟥 is-required

Used for form components where user input is mandatory.

Value	Behavior
true	Component shows a red asterisk, validates for completion
false	Component is optional, no error is triggered if left empty

If is-required is true, and the component is not completed in a flow (like form submission), an error message must be shown with actionable feedback.

🧪 Used in: Input fields, form groups, checkboxes, textareas

---

🟩 is-expanded

Used in components with collapsible or toggled regions.

Value	Behavior
true	The hidden content region becomes visible
false	The region is collapsed or hidden

Typically toggles the visibility of:

• Dropdown menus

• Accordion content

• Filter panels

• Disclosure lists

📐 Used in: Accordions, dropdowns, expandable cards, filter sections

---

⚠️ Best Practices

• Never hard-code visibility — use Booleans for conditional layers and semantics

• Stack Booleans alongside other states like hover, active, and disabled for robust behavior control

• Align Booleans with ARIA roles and expectations for accessibility parity

---

🧩 Why It Matters

Boolean variables make components smarter, more semantic, and easier to test and maintain. They also reinforce accessibility best practices by ensuring that behavior (not just appearance) drives interaction.

Booleans turn visual components into logic-driven building blocks — a core principle of scalable, accessible design systems.

How to Add Visibility Toggle to Nested Components

6MB

adding-visablity-toggle-compressed.mp4