SGUI / Development
Checkbox
Binary and mixed choices with validation, descriptions and named form values.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Binary and mixed choices with validation, descriptions and named form values.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
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 { Checkbox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function CheckboxPlaygroundExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Checkbox label={"Accept course terms"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this value." checked={checked} onCheckedChange={setChecked} mixed={false} name="accepted" 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 { Checkbox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function CheckboxCompactExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<Checkbox label={"Accept course terms"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this value." checked={checked} onCheckedChange={setChecked} mixed={false} name="accepted" 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 { Checkbox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function CheckboxComfortableExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Checkbox label={"Accept course terms"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this value." checked={checked} onCheckedChange={setChecked} mixed={false} name="accepted" 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 { Checkbox, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function CheckboxFormExample() {
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}>
<Checkbox label={"Accept course terms"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="below" required={true} invalid={false} errorMessage="Please review this value." checked={checked} onCheckedChange={setChecked} mixed={false} name="accepted" 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 { Checkbox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function CheckboxCompactExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<Checkbox label={"Accept course terms"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="above" required={false} invalid={true} errorMessage="Please review this value." checked={checked} onCheckedChange={setChecked} mixed={false} name="accepted" 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 { Checkbox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function CheckboxCompactExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<Checkbox label={"Accept course terms"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="below" errorPlacement="below" required={false} invalid={true} errorMessage="Please review this value." checked={checked} onCheckedChange={setChecked} mixed={false} name="accepted" 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 { Checkbox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function CheckboxComfortableExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Checkbox label={"Accept course terms"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="above" required={false} invalid={true} errorMessage="Please review this value." checked={checked} onCheckedChange={setChecked} mixed={false} name="accepted" 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 { Checkbox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function CheckboxComfortableExample() {
const [checked, setChecked] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Checkbox label={"Accept course terms"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="below" errorPlacement="below" required={false} invalid={true} errorMessage="Please review this value." checked={checked} onCheckedChange={setChecked} mixed={false} name="accepted" value="yes" />
</Stack>
</ThemeScope>
</>
);
}