OnboardingSection
A step-based onboarding flow organism for guiding users through setup or introduction sequences. Features progress indicators, step content, and action buttons with a trauma-informed, calming design.
Basic Onboarding Step
Welcome to Zika Alert
Stay informed about mosquito-borne disease risks in your area with personalized alerts.
Zika Alert helps you understand your personal risk level and take appropriate precautions.
Middle Step (Location Setup)
Enable Location Services
Allow access to your location to receive relevant risk alerts for your area.
Required for personalized risk assessments
Final Step
You're All Set!
Your account is ready. Start exploring your personalized health dashboard.
You can adjust your preferences anytime in Settings.
Need help? Contact support
Usage Example
<x-interface-frameworks.onboarding-section
:step="1"
:totalSteps="3"
title="Welcome"
description="Get started with our app."
icon="star"
>
<p>Introduction content...</p>
<x-slot:actions>
<x-building-blocks.button variant="ghost">Skip</x-building-blocks.button>
<x-building-blocks.button variant="primary">Next</x-building-blocks.button>
</x-slot:actions>
</x-interface-frameworks.onboarding-section>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| step | number | 1 | Current step number |
| totalSteps | number | 3 | Total number of steps |
| title | string | '' | Step title |
| description | string | '' | Step description |
| icon | string|null | null | Icon name to display |
| showProgress | boolean | true | Show progress indicator |
| class | string | '' | Additional CSS classes |
Slots
| Slot | Description |
|---|---|
| default | Main step content |
| actions | Footer action buttons (Next, Back, Skip) |
| help | Help text below the card |
Accessibility Features
- Progress bar has proper ARIA attributes (valuenow, valuemin, valuemax)
- Step dots include aria-labels
- Content is contained in semantic section element
- Heading hierarchy maintained
- Action buttons are keyboard accessible