1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Files
browser/libs/components/src/switch/switch.mdx
Bryan Cunningham 0aaab9fe52 [CL-820] Switch component (#16216)
* Add switch component

* fix focus state

* updating stories

* add switch role

* updated story docs code examples

* Add max length and long label story

* Add disabled reason text

* fix hint spacing

* support rtl thumb transform

* use correct input syntax. assign value to template variable

* remove pointer when disabled

* Show disabled text as title if it exists

* add basic switch component tests

* keep switch top aligned

* move switch back to right side of label

* add max width to label and hint

* updated switch story docs

* fix story html formatting

* better comment about which are ControlValueAccessor functions

* add JSDoc comment about model signals

* update methods to mirror search input format

* fix notify function type

* fix typo

* throw error if label is not provided

* add hover and focus states

* add label to failing spec

* import bit-label
2025-09-08 15:14:03 -04:00

37 lines
643 B
Plaintext

import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
import * as stories from "./switch.stories";
<Meta of={stories} />
```ts
import { SwitchModule } from "@bitwarden/components";
```
<Title />
<Description />
NOTE: The switch component will span 100% of the width of its container. These stories have a
container with a `max-width` of 600px
<Primary />
<Controls />
## Stories
### Default
<Canvas of={stories.Default} />
### Used with a from
<Canvas of={stories.WithForm} />
### With Long Label
<Canvas of={stories.WithLongLabel} />
### Disabled
<Canvas of={stories.Disabled} />