` element.",
"props": {
"className": {
"type": "string | ((state: Combobox.InputGroup.State) => string | undefined)",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
"detailedType": "| string\n| ((state: Combobox.InputGroup.State) => string | undefined)"
},
"style": {
"type": "CSSProperties | ((state: Combobox.InputGroup.State) => CSSProperties | undefined)",
"detailedType": "| React.CSSProperties\n| ((\n state: Combobox.InputGroup.State,\n ) => CSSProperties | undefined)\n| undefined"
},
"render": {
"type": "ReactElement | ((props: HTMLProps, state: Combobox.InputGroup.State) => ReactElement)",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Combobox.InputGroup.State,\n ) => ReactElement)"
}
},
"dataAttributes": {
"data-popup-open": {
"description": "Present when the corresponding popup is open."
},
"data-popup-side": {
"description": "Indicates which side the corresponding popup is positioned relative to its anchor.",
"type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null"
},
"data-list-empty": {
"description": "Present when the corresponding items list is empty."
},
"data-pressed": {
"description": "Present when the input group is pressed."
},
"data-disabled": {
"description": "Present when the component is disabled."
},
"data-readonly": {
"description": "Present when the component is readonly."
},
"data-valid": {
"description": "Present when the component is in valid state (when wrapped in Field.Root)."
},
"data-invalid": {
"description": "Present when the component is in invalid state (when wrapped in Field.Root)."
},
"data-dirty": {
"description": "Present when the component's value has changed (when wrapped in Field.Root)."
},
"data-touched": {
"description": "Present when the component has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the component has a value (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the component is focused (when wrapped in Field.Root)."
},
"data-placeholder": {
"description": "Present when the combobox doesn't have a value."
}
},
"cssVariables": {}
}
================================================
FILE: docs/reference/generated/combobox-input.json
================================================
{
"name": "ComboboxInput",
"description": "A text input to search for items in the list.\nRenders an `
` element.",
"props": {
"disabled": {
"type": "boolean",
"default": "false",
"description": "Whether the component should ignore user interaction.",
"detailedType": "boolean | undefined"
},
"className": {
"type": "string | ((state: Combobox.Input.State) => string | undefined)",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
"detailedType": "| string\n| ((state: Combobox.Input.State) => string | undefined)"
},
"style": {
"type": "CSSProperties | ((state: Combobox.Input.State) => CSSProperties | undefined)",
"detailedType": "| React.CSSProperties\n| ((\n state: Combobox.Input.State,\n ) => CSSProperties | undefined)\n| undefined"
},
"render": {
"type": "ReactElement | ((props: HTMLProps, state: Combobox.Input.State) => ReactElement)",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Combobox.Input.State,\n ) => ReactElement)"
}
},
"dataAttributes": {
"data-popup-open": {
"description": "Present when the corresponding popup is open."
},
"data-popup-side": {
"description": "Indicates which side the corresponding popup is positioned relative to its anchor.",
"type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null"
},
"data-list-empty": {
"description": "Present when the corresponding items list is empty."
},
"data-pressed": {
"description": "Present when the input is pressed."
},
"data-disabled": {
"description": "Present when the component is disabled."
},
"data-readonly": {
"description": "Present when the component is readonly."
},
"data-required": {
"description": "Present when the component is required."
},
"data-valid": {
"description": "Present when the component is in valid state (when wrapped in Field.Root)."
},
"data-invalid": {
"description": "Present when the component is in invalid state (when wrapped in Field.Root)."
},
"data-dirty": {
"description": "Present when the component's value has changed (when wrapped in Field.Root)."
},
"data-touched": {
"description": "Present when the component has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the component has a value (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the input is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
}
================================================
FILE: docs/reference/generated/combobox-item-indicator.json
================================================
{
"name": "ComboboxItemIndicator",
"description": "Indicates whether the item is selected.\nRenders a `
` element.",
"props": {
"children": {
"type": "ReactNode",
"detailedType": "React.ReactNode"
},
"className": {
"type": "string | ((state: Combobox.ItemIndicator.State) => string | undefined)",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
"detailedType": "| string\n| ((\n state: Combobox.ItemIndicator.State,\n ) => string | undefined)"
},
"style": {
"type": "CSSProperties | ((state: Combobox.ItemIndicator.State) => CSSProperties | undefined)",
"detailedType": "| React.CSSProperties\n| ((\n state: Combobox.ItemIndicator.State,\n ) => CSSProperties | undefined)\n| undefined"
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM when the item is not selected.",
"detailedType": "boolean | undefined"
},
"render": {
"type": "ReactElement | ((props: HTMLProps, state: Combobox.ItemIndicator.State) => ReactElement)",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Combobox.ItemIndicator.State,\n ) => ReactElement)"
}
},
"dataAttributes": {
"data-starting-style": {
"description": "Present when the indicator is animating in."
},
"data-ending-style": {
"description": "Present when the indicator is animating out."
}
},
"cssVariables": {}
}
================================================
FILE: docs/reference/generated/combobox-item.json
================================================
{
"name": "ComboboxItem",
"description": "An individual item in the list.\nRenders a `` element.",
"props": {
"value": {
"type": "any",
"default": "null",
"description": "A unique value that identifies this item."
},
"onClick": {
"type": "((event: BaseUIEvent
>) => void)",
"description": "An optional click handler for the item when selected.\nIt fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus.",
"detailedType": "| ((\n event: BaseUIEvent<\n MouseEvent\n >,\n ) => void)\n| undefined"
},
"index": {
"type": "number",
"description": "The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM.",
"detailedType": "number | undefined"
},
"nativeButton": {
"type": "boolean",
"default": "false",
"description": "Whether the component renders a native `