idstringoptionsreadonly Option[]defaultValue?neverinvalid?booleanfalseonChange?(value: string[]) => voidref?Ref<HTMLInputElement>value?string[]| Prop | Type | Default |
|---|---|---|
id | string | - |
options | readonly Option[] | - |
defaultValue? | never | - |
invalid? | boolean | false |
onChange? | (value: string[]) => void | - |
ref? | Ref<HTMLInputElement> | - |
value? | string[] | - |
Defaultがmessages.* のpropsは、未指定のとき文言辞書から解決されます。差し替え方は次を参照してください: i18n
import { Autocomplete } from '@k8ordo/ui';const [value, setValue] = useState<string[]>([]);
const options = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Cherry', value: 'cherry' },
{ label: 'Grape', value: 'grape' },
{ label: 'Orange', value: 'orange' },
];
<Autocomplete
id="autocomplete-basic"
aria-describedby={undefined}
disabled={false}
invalid={false}
required={false}
onChange={setValue}
options={options}
value={value}
/><Autocomplete
id="autocomplete-required"
aria-describedby={undefined}
disabled={false}
invalid={false}
required
onChange={setValue}
options={options}
value={value}
/>const [value, setValue] = useState<string[]>(['apple', 'cherry']);
<Autocomplete
id="autocomplete-multiple"
aria-describedby={undefined}
disabled={false}
invalid={false}
required={false}
onChange={setValue}
options={options}
value={value}
/><Autocomplete
id="autocomplete-disabled"
aria-describedby={undefined}
disabled
invalid={false}
required={false}
onChange={setValue}
options={options}
value={['apple']}
/><Autocomplete
id="autocomplete-invalid"
aria-describedby={undefined}
disabled={false}
invalid
required={false}
onChange={setValue}
options={options}
value={value}
/>