Component documentation
SGUI / Development
A controlled binary preference with descriptive and read-only states.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No direct parents in the documented component catalog.
Adjust the public props, then interact with the preview. Source follows the current state.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Switch } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SwitchPlaygroundExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Switch label={"Email reminders"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" checked={checked} onCheckedChange={setChecked} name="reminders" value="yes" />
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Switch } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SwitchCompactExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<Switch label={"Email reminders"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" checked={checked} onCheckedChange={setChecked} name="reminders" value="yes" />
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Switch } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SwitchComfortableExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Switch label={"Email reminders"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" checked={checked} onCheckedChange={setChecked} name="reminders" value="yes" />
</Stack>
</ThemeScope>
</>
);
}
Callbacks update local host state. No backend persistence is implied.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Switch, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SwitchFormExample() {
const [checked, setChecked] = useState(false);
const [submits, setSubmits] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<form onSubmit={event => { event.preventDefault(); setSubmits(count => count + 1); }}>
<Stack gap={3}>
<Stack gap={3}>
<Switch label={"Email reminders"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" checked={checked} onCheckedChange={setChecked} name="reminders" value="yes" />
</Stack>
<Button type="submit">Save locally</Button>
<Typography role="status">Submitted {submits} times. Connect persistence in your host.</Typography>
</Stack>
</form>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Switch } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SwitchCompactExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<Switch label={"Email reminders"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" checked={checked} onCheckedChange={setChecked} name="reminders" value="yes" />
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Switch } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SwitchCompactExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<Switch label={"Email reminders"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="below" checked={checked} onCheckedChange={setChecked} name="reminders" value="yes" />
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Switch } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SwitchComfortableExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Switch label={"Email reminders"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" checked={checked} onCheckedChange={setChecked} name="reminders" value="yes" />
</Stack>
</ThemeScope>
</>
);
}
An independent scope demonstrates the inherited spacing and interaction targets.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Switch } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function SwitchComfortableExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Switch label={"Email reminders"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="below" checked={checked} onCheckedChange={setChecked} name="reminders" value="yes" />
</Stack>
</ThemeScope>
</>
);
}