Skip to content

Switch - add onChange example to Storybook #445

Open
@mkernohanbc

Description

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)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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