메뉴
Add toggle switches with ShadSwitch and ShadSwitchFormField; label, form validation. Use when adding on/off toggles or switch form fields in a Flutter shadcn_ui app or ShadForm.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Build collapsible accordions with ShadAccordion and ShadAccordionItem; single or multiple open items. Use when adding expandable sections, FAQs, or vertically stacked reveal content in a Flutter shadcn_ui app.
Show callout alerts with ShadAlert and ShadAlert.destructive; icon, title, description. Use when displaying warnings, errors, or important messages in a Flutter shadcn_ui app.
Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.
Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.
Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.
Use Shadcn UI buttons (ShadButton variants: primary, secondary, destructive, outline, ghost, link); leading icon, loading state, gradient and shadow. Use when adding buttons, CTAs, or button-style widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-switch |
| description | Add toggle switches with ShadSwitch and ShadSwitchFormField; label, form validation. Use when adding on/off toggles or switch form fields in a Flutter shadcn_ui app or ShadForm. |
ShadSwitch is a control that toggles between checked and unchecked. Use value and onChanged; optional label. For forms use ShadSwitchFormField with id, initialValue, inputLabel, inputSublabel, validator.
ShadSwitch(
value: value,
onChanged: (v) => setState(() => value = v),
label: const Text('Airplane Mode'),
)
ShadSwitchFormField(
id: 'terms',
initialValue: false,
inputLabel: const Text('I accept the terms and conditions'),
onChanged: (v) {},
inputSublabel: const Text('You agree to our Terms and Conditions'),
validator: (v) {
if (!v) return 'You must accept the terms and conditions';
return null;
},
)