Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Feature Card Switch for Solid

A bordered card with a plus icon, the label Enable Feature, a short placeholder description, and a switch that starts off.

UI library: Ark UI

A bordered card shows a plus icon on a primary tile, the label Enable Feature, the line A short description goes here, and a switch that starts off.

Use a card when one feature needs an icon and a sentence of its own. A plain row is enough for a list of settings. If it submits with a form, a Checkbox matches that save. In Solid, Ark UI does not store Enable Feature anywhere else.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Switch anatomy: root, control, thumb, label

Usage

<div class="flex items-start gap-3 rounded-lg border bg-background p-4">
    <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
      <PlusIcon aria-hidden="true" class="size-5" />
    </div>
    <Field class="flex-1" orientation="horizontal">
      <FieldContent>
        <FieldLabel class="font-medium">Enable Feature</FieldLabel>
        <FieldDescription>A short description goes here.</FieldDescription>
      </FieldContent>
      <Switch />
    </Field>
  </div>

FAQ

How is the plus icon drawn?

PlusIcon is size-5 inside a size-10 shrink-0 rounded-lg tile with bg-primary text-primary-foreground, so it follows your theme. The card is flex items-start gap-3 rounded-lg border bg-background p-4.

How is Enable Feature tied to the switch?

A horizontal Field holds a FieldContent, with the FieldLabel and the FieldDescription, and then the Switch. The Field links the label to the switch, so this file sets no ids.

How do I control this switch in Solid?

Nothing in this file sets the on state, so the switch starts off and keeps its own state. To control it, keep the on or off state in your own state and pass it back. To start it on, use the default prop. The prop is defaultChecked. Pass checked; onCheckedChange receives details.checked.

Does this switch submit with a form?

Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing.

How do I make this switch smaller?

Set size="sm". The default size is default. For a different track or thumb, edit those classes in the Switch file in your ui folder.

Which keys toggle the switch?

Tab moves focus to the switch. Space toggles it, and so does Enter.

API Reference

Field

Sets orientation="horizontal". The rest is on the Field page.

Switch

No extra props in this demo. The rest is on the Switch page.

All 19 switch examples