SGUI / Development
ComboBox
Search locally supplied options with keyboard selection and controlled host state.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Search locally supplied options with keyboard selection and controlled host state.
Loading examples…
Loading examples…
Loading examples…
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 { ComboBox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ComboBoxPlaygroundExample() {
const [value, setValue] = useState<string | null>("design");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ComboBox 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={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} placeholder="Search course subjects" 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 { ComboBox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ComboBoxCompactExample() {
const [value, setValue] = useState<string | null>("design");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<ComboBox 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={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} placeholder="Search course subjects" 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 { ComboBox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ComboBoxComfortableExample() {
const [value, setValue] = useState<string | null>("design");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ComboBox 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={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} placeholder="Search course subjects" name="subject" />
</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 { ComboBox, Button } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ComboBoxFormExample() {
const [value, setValue] = useState<string | null>("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}>
<ComboBox 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={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} placeholder="Search course subjects" name="subject" />
</Stack>
<Button type="submit">Save locally</Button>
<Typography role="status">Submitted {submits} times. Connect persistence in your host.</Typography>
</Stack>
</form>
</ThemeScope>
</>
);
}
Autocomplete is the public primitives alias of ComboBox; it uses the same stable option IDs and controlled selection contract.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Autocomplete, Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { Button } from '@structured-growth/sg-ui/experimental';
export default function AutocompleteAliasExample() {
const [value, setValue] = useState<string | null>("research");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<Autocomplete label={"Find a course subject"} options={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} value={value} onValueChange={setValue} disabled={false} readOnly={false} placeholder="Search course subjects" />
<Button variant="outlined" onPress={() => setValue(null)}>Clear host selection</Button>
</Stack>
</ThemeScope>
</>
);
}
This field starts empty so its placeholder is visible. The icons are decorative and follow the text direction; they add no tab stops. The visible label remains the accessible name. Selection controls keep their dropdown action; fetching and search results belong to the host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {ComboBox} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function ComboBoxcompactnoneExample() {
const options=[{"id":"design","label":"Design systems"},{"id":"research","label":"User research"},{"id":"engineering","label":"Engineering"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<ComboBox label="Course subject" placeholder="Search course subjects" options={options} value={value} onValueChange={setValue}/>
</Box>
</ThemeScope>
</>
);
}
This field starts empty so its placeholder is visible. The icons are decorative and follow the text direction; they add no tab stops. The visible label remains the accessible name. Selection controls keep their dropdown action; fetching and search results belong to the host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {ComboBox} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
import {SearchIcon} from '@structured-growth/sg-ui/icons';
export default function ComboBoxcompactstartExample() {
const options=[{"id":"design","label":"Design systems"},{"id":"research","label":"User research"},{"id":"engineering","label":"Engineering"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<ComboBox label="Course subject" placeholder="Search course subjects" startIcon={<SearchIcon size={16}/>} options={options} value={value} onValueChange={setValue}/>
</Box>
</ThemeScope>
</>
);
}
This field starts empty so its placeholder is visible. The icons are decorative and follow the text direction; they add no tab stops. The visible label remains the accessible name. Selection controls keep their dropdown action; fetching and search results belong to the host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {ComboBox} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
import {SchoolIcon} from '@structured-growth/sg-ui/icons';
export default function ComboBoxcompactendExample() {
const options=[{"id":"design","label":"Design systems"},{"id":"research","label":"User research"},{"id":"engineering","label":"Engineering"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<ComboBox label="Course subject" placeholder="Search course subjects" endIcon={<SchoolIcon size={16}/>} options={options} value={value} onValueChange={setValue}/>
</Box>
</ThemeScope>
</>
);
}
This field starts empty so its placeholder is visible. The icons are decorative and follow the text direction; they add no tab stops. The visible label remains the accessible name. Selection controls keep their dropdown action; fetching and search results belong to the host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {ComboBox} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
import {SearchIcon,SchoolIcon} from '@structured-growth/sg-ui/icons';
export default function ComboBoxcompactbothExample() {
const options=[{"id":"design","label":"Design systems"},{"id":"research","label":"User research"},{"id":"engineering","label":"Engineering"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="compact">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<ComboBox label="Course subject" placeholder="Search course subjects" startIcon={<SearchIcon size={16}/>} endIcon={<SchoolIcon size={16}/>} options={options} value={value} onValueChange={setValue}/>
</Box>
</ThemeScope>
</>
);
}
This field starts empty so its placeholder is visible. The icons are decorative and follow the text direction; they add no tab stops. The visible label remains the accessible name. Selection controls keep their dropdown action; fetching and search results belong to the host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {ComboBox} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
export default function ComboBoxcomfortablenoneExample() {
const options=[{"id":"design","label":"Design systems"},{"id":"research","label":"User research"},{"id":"engineering","label":"Engineering"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<ComboBox label="Course subject" placeholder="Search course subjects" options={options} value={value} onValueChange={setValue}/>
</Box>
</ThemeScope>
</>
);
}
This field starts empty so its placeholder is visible. The icons are decorative and follow the text direction; they add no tab stops. The visible label remains the accessible name. Selection controls keep their dropdown action; fetching and search results belong to the host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {ComboBox} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
import {SearchIcon} from '@structured-growth/sg-ui/icons';
export default function ComboBoxcomfortablestartExample() {
const options=[{"id":"design","label":"Design systems"},{"id":"research","label":"User research"},{"id":"engineering","label":"Engineering"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<ComboBox label="Course subject" placeholder="Search course subjects" startIcon={<SearchIcon size={16}/>} options={options} value={value} onValueChange={setValue}/>
</Box>
</ThemeScope>
</>
);
}
This field starts empty so its placeholder is visible. The icons are decorative and follow the text direction; they add no tab stops. The visible label remains the accessible name. Selection controls keep their dropdown action; fetching and search results belong to the host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {ComboBox} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
import {SchoolIcon} from '@structured-growth/sg-ui/icons';
export default function ComboBoxcomfortableendExample() {
const options=[{"id":"design","label":"Design systems"},{"id":"research","label":"User research"},{"id":"engineering","label":"Engineering"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<ComboBox label="Course subject" placeholder="Search course subjects" endIcon={<SchoolIcon size={16}/>} options={options} value={value} onValueChange={setValue}/>
</Box>
</ThemeScope>
</>
);
}
This field starts empty so its placeholder is visible. The icons are decorative and follow the text direction; they add no tab stops. The visible label remains the accessible name. Selection controls keep their dropdown action; fetching and search results belong to the host.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {ComboBox} from '@structured-growth/sg-ui/experimental';
import {Box} from '@structured-growth/sg-ui/primitives';
import {SearchIcon,SchoolIcon} from '@structured-growth/sg-ui/icons';
export default function ComboBoxcomfortablebothExample() {
const options=[{"id":"design","label":"Design systems"},{"id":"research","label":"User research"},{"id":"engineering","label":"Engineering"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<Box style={{inlineSize:'22rem',maxInlineSize:'100%'}}>
<ComboBox label="Course subject" placeholder="Search course subjects" startIcon={<SearchIcon size={16}/>} endIcon={<SchoolIcon size={16}/>} options={options} value={value} onValueChange={setValue}/>
</Box>
</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 { ComboBox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ComboBoxCompactExample() {
const [value, setValue] = useState<string | null>("design");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<ComboBox 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={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} placeholder="Search course subjects" 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 { ComboBox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ComboBoxCompactExample() {
const [value, setValue] = useState<string | null>("design");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}>
<ComboBox 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={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} placeholder="Search course subjects" 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 { ComboBox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ComboBoxComfortableExample() {
const [value, setValue] = useState<string | null>("design");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ComboBox 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={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} placeholder="Search course subjects" 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 { ComboBox } from '@structured-growth/sg-ui/experimental';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ComboBoxComfortableExample() {
const [value, setValue] = useState<string | null>("design");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}>
<ComboBox 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={[{"id":"design","label":"Design systems"},{"id":"engineering","label":"Engineering"},{"id":"research","label":"Research"},{"id":"archived","label":"Archived course","disabled":true}]} placeholder="Search course subjects" name="subject" />
</Stack>
</ThemeScope>
</>
);
}