Nested States

Nesting lets you organize related states into hierarchies. A parent state groups its children, and each child can have its own children.

Creating Nested States

Use tabs to nest states inside parents. Each tab level creates a new depth:

Parent
	Child A
		Grandchild A1
		Grandchild A2
	Child B

Initial States in Hierarchies

Mark the default child at each level with *. When transitioning to a parent, its initial child becomes active.

Dashboard
	Sidebar
		expanded *
		collapsed
	Main Content *

Transitions Between Levels

Transitions can move between any states, regardless of nesting level:

Login *
	submit -> App/Dashboard
App
	Dashboard *
		logout -> Login
	Settings
		back -> Dashboard

Interactive Example

Here's a nested state machine with multiple levels. Click states or use the preview to navigate:

When to Use Nesting

• Grouping related states - A modal with different content states
• Parallel states - A sidebar and main content that change independently
• Complex flows - Multi-step forms with validation states
• Shared transitions - Parent-level logout that applies to all children