SGUI / Development
RadioGroup
Mutually exclusive choices with orientation, disabled options and validation.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Mutually exclusive choices with orientation, disabled options and validation.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
The orientation and density comparisons stay visible and independent of the prop playground.
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 { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGroupPlaygroundExample() {
const [value, setValue] = useState("design");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<RadioGroup label={"Course subject"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="below" required={false} invalid={false} errorMessage="Please review this value." value={value} onValueChange={setValue} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="vertical" name="subject" />
</Stack>
</ThemeScope>
</>
);
}
The orientation and density comparisons stay visible and independent of the prop playground.
The orientation and density comparisons stay visible and independent of the prop playground.
An independently controlled selected choice with an individually unavailable option.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGrouphorizontalcompactequalExample() {
const [value, setValue] = useState<string | null>("design");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<RadioGroup label={"Course topics: horizontal compact"} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="horizontal" value={value} onValueChange={setValue} readOnly={false} />
</Stack>
</ThemeScope>
</>
);
}
An independently controlled selected choice with an individually unavailable option.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGrouphorizontalcomfortableequalExample() {
const [value, setValue] = useState<string | null>("engineering");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<RadioGroup label={"Course topics: horizontal comfortable"} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="horizontal" value={value} onValueChange={setValue} readOnly={false} />
</Stack>
</ThemeScope>
</>
);
}
An initially empty group with an individually unavailable option; choose one topic.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGroupverticalcompactequalExample() {
const [value, setValue] = useState<string | null>(null);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<RadioGroup label={"Course topics: vertical compact"} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="vertical" value={value} onValueChange={setValue} readOnly={false} />
</Stack>
</ThemeScope>
</>
);
}
A read-only selected choice, with an individually unavailable option.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGroupverticalcomfortableequalExample() {
const [value, setValue] = useState<string | null>("research");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<RadioGroup label={"Course topics: vertical comfortable"} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="vertical" value={value} onValueChange={setValue} readOnly={true} />
</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 { RadioGroup, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGroupFormExample() {
const [value, setValue] = useState("design");
const [submits, setSubmits] = useState(0);
return (
<>
<ThemeScope density="comfortable">
<form onSubmit={event => { event.preventDefault(); setSubmits(count => count + 1); }}>
<Stack gap={3}>
<Stack gap={3}>
<RadioGroup label={"Course subject"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="below" required={true} invalid={false} errorMessage="Please review this value." value={value} onValueChange={setValue} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="vertical" name="subject" />
</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 { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGroupCompactExample() {
const [value, setValue] = useState("design");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<RadioGroup label={"Course subject"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="above" required={false} invalid={true} errorMessage="Please review this value." value={value} onValueChange={setValue} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="vertical" name="subject" />
</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 { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGroupCompactExample() {
const [value, setValue] = useState("design");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<RadioGroup label={"Course subject"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="below" errorPlacement="below" required={false} invalid={true} errorMessage="Please review this value." value={value} onValueChange={setValue} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="vertical" name="subject" />
</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 { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGroupComfortableExample() {
const [value, setValue] = useState("design");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<RadioGroup label={"Course subject"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="above" errorPlacement="above" required={false} invalid={true} errorMessage="Please review this value." value={value} onValueChange={setValue} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="vertical" name="subject" />
</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 { RadioGroup } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RadioGroupComfortableExample() {
const [value, setValue] = useState("design");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<RadioGroup label={"Course subject"} disabled={false} readOnly={false} description={"Host-supplied course information."} descriptionPlacement="below" errorPlacement="below" required={false} invalid={true} errorMessage="Please review this value." value={value} onValueChange={setValue} options={[{"value":"design","label":"Design systems"},{"value":"engineering","label":"Engineering"},{"value":"research","label":"Research"},{"value":"archived","label":"Archived course","disabled":true}]} orientation="vertical" name="subject" />
</Stack>
</ThemeScope>
</>
);
}