Skip to content

Commit

Permalink
fix: docs forms toggle switch - incorrect code preview (#1061)
Browse files Browse the repository at this point in the history
Co-authored-by: Sebastian Sutu <[email protected]>
  • Loading branch information
SutuSebastian and Sebastian Sutu authored Oct 12, 2023
1 parent 8c5bd0b commit 5733b12
Showing 1 changed file with 17 additions and 1 deletion.
18 changes: 17 additions & 1 deletion app/docs/components/forms/forms.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,23 @@ Use the `<FileInput>` component to allow users to upload files from their browse

Use the `<ToggleSwitch>` component to ask users to enable or disable an option such as newsletter settings.

<CodePreview githubPage="ToggleSwitch/ToggleSwitch" importFlowbiteReact="ToggleSwitch" title="Toggle switch element">
<CodePreview
githubPage="ToggleSwitch/ToggleSwitch"
importFlowbiteReact="ToggleSwitch"
title="Toggle switch element"
functionBody={[
'const [switch1, setSwitch1] = useState(false);',
'const [switch2, setSwitch2] = useState(true);',
'const [switch3, setSwitch3] = useState(true);',
]}
code={`<div className="flex max-w-md flex-col gap-4" id="toggle">
<ToggleSwitch checked={switch1} label="Toggle me" onChange={setSwitch1} />
<ToggleSwitch checked={switch2} label="Toggle me (checked)" onChange={setSwitch2} />
<ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />
<ToggleSwitch checked={true} disabled label="Toggle me (disabled)" onChange={() => undefined} />
<ToggleSwitch checked={switch3} onChange={setSwitch3} />
</div>`}
>
<div className="flex max-w-md flex-col gap-4" id="toggle">
<ToggleSwitch checked={props.switch1} label="Toggle me" onChange={props.setSwitch1} />
<ToggleSwitch checked={props.switch2} label="Toggle me (checked)" onChange={props.setSwitch2} />
Expand Down

1 comment on commit 5733b12

@vercel
Copy link

@vercel vercel bot commented on 5733b12 Oct 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.