MultiAutocomplete

MultiAutocompleteは、ユーザーのテキスト入力に応じて候補を表示し、複数の値を取得するために使用されるコンポーネントです。

ソース @yamada-ui/autocomplete

Props

MultiAutocompleteProps

説明

If true, enables the creation of autocomplete option.

タイプ

boolean

デフォルト

false

説明

If true, enables the free input.

タイプ

boolean

説明

The animation of the popover.

タイプ

デフォルト

'scale'

説明

The boundary area for the popper. Used within the preventOverflow modifier.

タイプ

HTMLElement | "clippingParents" | "scrollParent"

デフォルト

'clippingParents'

説明

Props for multi autocomplete clear icon element.

タイプ

AutocompleteIconProps

説明

The number of delay time to close.

タイプ

number

デフォルト

200

説明

If true, the popover will close when you blur out it by clicking outside or tabbing out.

タイプ

boolean

デフォルト

true

説明

If true, the popover will close when you hit the Esc key.

タイプ

boolean

デフォルト

true

説明

If true, the list element will be closed when value is selected.

タイプ

boolean

デフォルト

false

説明

The visual color appearance of the component.

タイプ

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

説明

The custom display value to use.

タイプ

FC<{
index: number
label: string
value: string | number
onRemove: MouseEventHandler<HTMLElement>
}>

説明

Props for multi autocomplete container element.

タイプ

Omit<HTMLUIProps, "children">

説明

Props for multi autocomplete content element.

タイプ

Omit<MotionProps, "children">

説明

Props for autocomplete create element.

タイプ

Omit<AutocompleteCreateProps, "children">

説明

If true, the popover will be initially opened.

タイプ

boolean

説明

The initial value of the autocomplete.

タイプ

string[]

説明

The animation duration.

タイプ

number | MotionLifecycleProps<number>

説明

The message displayed when the search yields no hits.

タイプ

string

デフォルト

'No results found'

説明

Props for autocomplete empty element.

タイプ

Omit<AutocompleteEmptyProps, "children">

説明

The border color when the input is invalid.

タイプ

string

説明

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

タイプ

type ONLY_FOR_FORMAT =
| boolean
| { resize?: boolean | undefined; scroll?: boolean | undefined }

デフォルト

true

説明

Props for multi autocomplete field element.

タイプ

Omit<MultiAutocompleteFieldProps,
"children" | "separator" | "inputProps" | "component" | "keepPlaceholder">

説明

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

タイプ

boolean

デフォルト

true

説明

The border color when the input is focused.

タイプ

string

説明

Function to format text when search input.

タイプ

(value: string) => string

説明

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

タイプ

UIValue<number>

デフォルト

8

説明

The header of the autocomplete content element.

タイプ

string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | FC<...>

説明

Props for multi autocomplete icon element.

タイプ

AutocompleteIconProps

説明

Props for multi autocomplete input element.

タイプ

HTMLUIProps<"input">

説明

The position to be inserted when the autocomplete option is created.

タイプ

[string, "first" | "last"] | Union<"first" | "last">

デフォルト

'first'

説明

If true, display the select clear icon.

タイプ

boolean

デフォルト

true

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

If true, the PopoverContent rendering will be deferred until the popover is open.

タイプ

boolean

デフォルト

false

説明

If true, the popover will be opened.

タイプ

boolean

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

説明

If provided, generate options based on items.

タイプ

AutocompleteItem[]

説明

If true, keep the placeholder.

タイプ

boolean

デフォルト

false

説明

The lazy behavior of popover's content when not visible. Only works when isLazy={true} - unmount: The popover's content is always unmounted when not open. - keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.

タイプ

LazyMode

デフォルト

'unmount'

説明

Props for multi autocomplete list element.

タイプ

Omit<AutocompleteListProps, "children">

説明

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

タイプ

boolean

デフォルト

false

説明

The maximum selectable value.

タイプ

number

説明

Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.

タイプ

Partial<Modifier<string, any>>[]

ドキュメント

https://popper.js.org/docs/v2/modifiers/

説明

The main and cross-axis offset to displace popper element from its reference element.

タイプ

[number, number]

説明

If true, the selected item(s) will be excluded from the list.

タイプ

boolean

デフォルト

false

説明

The callback invoked when value state changes.

タイプ

(value: string[]) => void

説明

Callback fired when the popover closes.

タイプ

() => void

説明

The callback invoked when autocomplete option created.

タイプ

(
newItem: AutocompleteItem,
newItems: AutocompleteItem[],
) => void

説明

Callback fired when the popover opens.

タイプ

() => void

説明

The callback invoked when search input.

タイプ

(ev: ChangeEvent<HTMLInputElement>) => void

説明

The number of delay time to open.

タイプ

number

デフォルト

200

説明

Props for select option element.

タイプ

Omit<AutocompleteOptionProps, "value" | "children">

説明

The placement of the popper relative to its reference.

タイプ

UIValue<Placement>

デフォルト

'bottom'

説明

Props to be forwarded to the portal component.

タイプ

Omit<PortalProps, "children">

デフォルト

'{ isDisabled: true }'

説明

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

タイプ

boolean

デフォルト

true

説明

The visual separator between each value.

タイプ

string

デフォルト

','

説明

The size of the MultiAutocomplete.

タイプ

"xs" | "sm" | "md" | "lg" | "xl"

デフォルト

"md"

説明

The CSS positioning strategy to use.

タイプ

"fixed" | "absolute"

デフォルト

'absolute'

説明

The value of the autocomplete.

タイプ

string[]

説明

The variant of the MultiAutocomplete.

タイプ

"filled" | "flushed" | "outline" | "unstyled"

デフォルト

"outline"

GitHubでこのページを編集する

前Autocomplete 次DatePicker