Tile UI · SolidJS

CSR · SSR · SSG

Toggle

A controlled or uncontrolled SolidJS toggle button.

Pressed state: false

import { createSignal } from 'solid-js';
import { Toggle } from '@tile-ui/solid';

export default function ToggleDemo() {
	const [pressed, setPressed] = createSignal(false);

Use Toggle for controlled or uncontrolled binary state in SolidJS.

Registry install

pnpm dlx shadcn@latest add @tile-ui/toggle

Package usage

import { Toggle } from '@tile-ui/solid';

<Toggle variant="outline">Bold</Toggle>

Highlights

  • Three variants
  • Three sizes
  • Pressed state

Registry dependencies

Item Purpose
toggle Component source and module styles
core Framework-agnostic logic helpers
utils Shared utility helpers
styles Shared SCSS tokens and globals

API reference

Toggle

Prop Type Default
variant 'default' | 'outline' | 'ghost'
size 'sm' | 'default' | 'lg'
pressed boolean
defaultPressed boolean
onPressedChange (pressed: boolean) => void