Component documentation
SGUI / Development
A combined text field and select with aliases, forgiving search and an optional search field inside the dropdown.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
import {SearchIcon} from '@structured-growth/sg-ui/icons';
export default function SearchableStateExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label={"Delivery state"} placeholder={"Type a name or abbreviation"} searchPlaceholder="Search states or abbreviations"
options={options} value={value} onValueChange={setValue} searchPlacement="input" filter="contains"
clearable={true} disabled={false} readOnly={false} required={false} loading={false}
startIcon={<SearchIcon size={16}/>}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="compact">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="input" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states"/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="input" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states"/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="compact">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="dropdown" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states"/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="dropdown" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states"/>
</ThemeScope>
</>
);
}
Try TX, Lone Star, CA or Empire. Keywords are supplied by the host; record IDs are never guessed as aliases.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="input" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states" description={"Try TX, Lone Star, CA or Empire. Keywords are supplied by the host; record IDs are never guessed as aliases."}/>
</ThemeScope>
</>
);
}
Try Txeas or Californa. Exact labels and aliases rank first; typo correction applies only to query words of at least three characters.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="input" filter="fuzzy" clearable placeholder="Choose a state" searchPlaceholder="Search states" description={"Try Txeas or Californa. Exact labels and aliases rank first; typo correction applies only to query words of at least three characters."}/>
</ThemeScope>
</>
);
}
Try New. Only the beginning of a label or keyword matches.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="input" filter="startsWith" clearable placeholder="Choose a state" searchPlaceholder="Search states" description={"Try New. Only the beginning of a label or keyword matches."}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>("tx");
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="dropdown" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states" readOnly={true}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>("ca");
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="input" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states" disabled={true}/>
</ThemeScope>
</>
);
}
Your delivery address determines available services.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="input" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states" description={"Your delivery address determines available services."} invalid={true} errorMessage={"Choose a delivery state."}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="input" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states" emptyMessage="No states are available."/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function StateSelectionExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
return (
<>
<ThemeScope density="comfortable">
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue}
searchPlacement="dropdown" filter="contains" clearable placeholder="Choose a state" searchPlaceholder="Search states" loading={true}/>
</ThemeScope>
</>
);
}
Open the dropdown and retry to reveal local sample options. In an application the host runs the request, owns cancellation and rejects stale responses.
'use client';
import { useState } from 'react';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function RetryStateOptionsExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [failed,setFailed]=useState(true);
const [value,setValue]=useState<string|null>(null);
return (
<>
<SearchableSelect label="Delivery state" searchPlacement="dropdown" options={options} value={value} onValueChange={setValue}
searchErrorMessage={failed ? "States could not be loaded." : undefined} onRetry={() => setFailed(false)}/>
</>
);
}
Supply a predicate for a domain-specific rule. For remote search use filter="none" and onSearchChange; fetching and response ordering stay in the host.
'use client';
import { useState } from 'react';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
export default function CustomStateMatcherExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [value,setValue]=useState<string|null>(null);
const match=(option:{label:string;keywords?:readonly string[]},query:string)=>
[option.label,...option.keywords??[]].some(text=>text.toLowerCase().startsWith(query.toLowerCase().trim()));
return (
<>
<SearchableSelect label="State" options={options} value={value} onValueChange={setValue} filter={match}/>
</>
);
}
Submits a stable state ID and restores the uncontrolled default on reset. This example performs no persistence.
'use client';
import { useState } from 'react';
import {SearchableSelect, type SearchableSelectOption} from '@structured-growth/sg-ui/primitives';
import {Button,Stack,Typography} from '@structured-growth/sg-ui/primitives';
export default function DeliveryFormExample() {
const options:SearchableSelectOption[]=[{"id":"al","label":"Alabama","keywords":["AL"],"description":"Southeast · Central time"},{"id":"ca","label":"California","keywords":["CA","Golden State"],"description":"West · Pacific time"},{"id":"ny","label":"New York","keywords":["NY","Empire State"],"description":"Northeast · Eastern time"},{"id":"nm","label":"New Mexico","keywords":["NM"],"description":"Southwest · Mountain time"},{"id":"tx","label":"Texas","keywords":["TX","Lone Star State"],"description":"South · Central and Mountain time"},{"id":"wa","label":"Washington","keywords":["WA","Evergreen State"],"description":"Northwest · Pacific time"},{"id":"unavailable","label":"Unavailable region","disabled":true,"description":"Not available for this address"}];
const [result,setResult]=useState("");
return (
<>
<form onSubmit={event=>{event.preventDefault();const state=new FormData(event.currentTarget).get("state");setResult(`Address ready for ${state}.`);}} onReset={()=>setResult("")}>
<Stack gap={3}>
<SearchableSelect label="Delivery state" options={options} name="state" defaultValue="tx" required clearable searchPlacement="dropdown"/>
<Stack direction="row" gap={2}><Button type="submit">Use address</Button><Button type="reset" variant="outlined">Reset address</Button></Stack>
<Typography role="status">{result}</Typography>
</Stack>
</form>
</>
);
}