Skip to content

Switch - add onChange example to Storybook #445

Open
@mkernohanbc

Description

@mkernohanbc

One thing to add either in here or in another PR at some point: onChange example. Here's what I roughed out on the Vite page to make sure the thing worked as I expected:

import { useState } from "react";

import { Switch } from "@/components";

export default function SwitchPage() {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <>
      <h2>Switch</h2>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--layout-margin-medium",
        }}
      >
        <Switch>Label</Switch>
        <Switch labelPosition="left">Reversed label position</Switch>
        <Switch isDisabled>Disabled switch</Switch>
        <Switch labelPosition="left" defaultSelected>
          Switch on by default
        </Switch>
        <div>
          <Switch
            id="controlled-switch"
            isSelected={isSelected}
            onChange={() => setIsSelected(!isSelected)}
          >
            <pre>isSelected:</pre> {isSelected ? "true" : "false"}
          </Switch>
        </div>
      </div>
    </>
  );
}

Originally posted by @ty2k in #440 (review)

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions