{
  "schemaVersion": 1,
  "files": [
    {
      "path": "SKILL.md",
      "content": "---\nname: homarr-custom-widget\ndescription: Author safe Homarr Custom JSX v2 widgets from API documentation. Use when creating or fixing Homarr custom widgets, including multi-source dashboards, queries, actions, options, temporary inputs, and Mantine JSX.\nlicense: Apache-2.0\nmetadata:\n  version: \"2.0.0\"\n---\n\n# Homarr Custom Widget\n\nCreate one widget at a time. Repeat the workflow when the user asks for several widgets; do not invent packs or shared connections.\n\n## Choose the authoring reference\n\nWhen connected to Homarr, retrieve the live widget schema and component catalog before authoring. Live metadata is authoritative because Homarr and Mantine versions can differ between installations.\n\nFor offline authoring, read these installed, release-matched references in order:\n\n1. [Schema](references/schema.md)\n2. [JSX runtime](references/runtime.md)\n3. [Security boundary](references/security.md)\n4. [Component catalog](references/components.md)\n5. [Mantine Core](references/mantine-core.md)\n6. [Mantine Dates](references/mantine-dates.md)\n7. [Mantine Charts](references/mantine-charts.md)\n8. [Homarr components](references/homarr-components.md)\n\nTogether, this file and those references are the complete offline authoring bundle for the matching Homarr release. Do not require MCP tools, repository access, or external component documentation to produce a best-effort widget. If live metadata is available, prefer it over the installed static bundle.\n\n## Authoring workflow\n\n1. Read the API documentation supplied by the user. Ask for a missing base URL only when it cannot be inferred safely.\n2. Build one credential-free `homarr-custom-widget-v2` manifest and one safe JSX template.\n3. Use immutable local `const` blocks for repeated derived values and `RecursiveList` for arbitrary-depth trees. Do not emulate either feature with unrestricted JavaScript or authored recursion.\n4. Return the complete manifest and JSX in the exact fenced-block format requested by the authoring prompt.\n5. When the user supplies Homarr diagnostics, correct every reported issue while preserving unrelated fields.\n\n## Output rules\n\n- Use inline sources, named requests, definition-owned options, temporary bound inputs, and one safe JSX template.\n- Use `kind`, not the HTTP method, to distinguish reads from user-triggered actions.\n- Give every declared request parameter an explicit source. Load queries use `optionsBinding` with an option reference or primitive literal; manual queries and actions receive values only from the invoking component's `params` prop. Never infer bindings from matching names.\n- Never put a credential in JSX, options, headers, URLs, examples, exports, logs, or chat output.\n- Use declarative `bind` controls and Homarr request components. Controlled collection callbacks, zero-argument derived-value IIFEs, and the `RecursiveList` child template may use the restricted safe-block grammar documented in the runtime reference. Never emit imports, hooks, refs, raw callback props, browser requests, or arbitrary JavaScript.\n- Include responsive loading, empty, error, and success states.\n- Keep actions explicit, permission-scoped, confirmed when destructive, and followed by targeted invalidation.\n"
    },
    {
      "path": "references/schema.md",
      "content": "# Custom Widget v2 schema\n\nEvery import and export is one object with `$schema: \"homarr-custom-widget-v2\"`, metadata, `sources`, `requests`, `optionsSchema`, `defaultOptions`, and `template`. Secrets are accepted separately by create/update/preview operations and never exported.\n\nThe safe-local-binding and `RecursiveList` expansion changes only template authoring. It does not add database fields, request fields, persistence, or another widget schema version.\n\n```ts\ninterface HomarrCustomWidgetV2 {\n  $schema: \"homarr-custom-widget-v2\";\n  name: string;\n  description?: string;\n  iconUrl?: string;\n  sources: CustomWidgetSource[];\n  requests: CustomWidgetRequest[];\n  optionsSchema: CustomWidgetOptionsSchema;\n  defaultOptions: Record<string, unknown>;\n  template: string;\n}\n```\n\nA source has a stable lowercase `id`, display `name`, `baseUrl`, `networkScope` (`public`, `private`, or `loopback`), and one auth mode: `none`, `bearer`, `basic`, `apiKeyHeader`, or `apiKeyQuery`.\n\nA request has `id`, `sourceId`, `kind`, any supported HTTP `method`, same-origin `pathTemplate`, declared primitive `parameters`, optional `optionsBinding`, `queryTemplate`, and `bodyTemplate`, optional safe `staticHeaders`, `auth`, `minimumBoardPermission`, optional `trigger`, caching, confirmation, and invalidation. Parameter names may use camelCase. Reference a declared parameter with `{name}` in a path or `{ \"$param\": \"name\" }` in structured query/body data.\n\nEvery declared parameter needs an explicit source. For a load query, bind each parameter in `optionsBinding` with `{ \"$option\": \"optionName\" }` or a primitive literal of the declared type. The referenced option must exist in `optionsSchema`. For manual queries and actions, the invoking `SubFetch`, `ActionButton`, or `ToggleSwitch` supplies the complete parameter object through `params`. Never infer a source because a parameter, option, or temporary input has the same name.\n\nDynamic option requests have no JSX invoker and therefore also require `optionsBinding` for every parameter they declare.\n\nOptions use a restricted object JSON Schema. Set `additionalProperties: false`. Presentation metadata lives under `x-homarr`; dynamic selects use `optionsSource.requestId`, optional `itemsPath` for wrapped arrays, `valuePath`, and `labelPath`. Default options must validate against the schema.\n\nOption and bind names start with a letter and use letters, numbers, `-`, or `_`; camelCase is supported. Every JSX `bind` value is a literal temporary input name.\n\nDo not model credentials as options or static defaults. Credential-like option names and values are rejected; source authentication is configured separately.\n\nDo not add `stateSchema`, `defaultState`, scripts, imports, or component declarations to the manifest. Temporary interaction values come only from JSX `bind` controls and are exposed through `inputs`. Derived values declared with safe `const` blocks exist only while evaluating the template.\n\nThis reference is sufficient for offline authoring against the matching release. When connected, retrieve the live Custom Widget schema; it supersedes this static copy if the installed Homarr version differs.\n"
    },
    {
      "path": "references/runtime.md",
      "content": "# JSX runtime\n\nTemplates read four roots: `data.<requestId>`, `status.<requestId>`, `options`, and `inputs`.\n\nUse Mantine Core, Dates, Charts, safe Tabler icons, and Homarr runtime components. Safe installed Mantine exports are discovered automatically. Ordinary serializable props and Mantine style props pass through; `style` and `styles` are scoped and sanitized.\n\nRender icons as `<TablerIcon name=\"server\" size={18} />`. When connected, retrieve `homarr://custom-widgets/components/TablerIcon` for the supported icon names.\n\nUse `SubFetch` for a manual query, `ActionButton` or `ToggleSwitch` for an action, and `RefreshButton` to refresh data. A query with `trigger: \"load\"` populates its data automatically and follows the widget refresh interval.\n\nManual requests receive values only from the invoking component:\n\n```jsx\n<SubFetch requestId=\"search\" params={{ query: inputs.search }} />\n<ActionButton requestId=\"restart\" params={{ id: container.Id }}>Restart</ActionButton>\n```\n\nLoop variables and other JSX expressions can flow into a request only through that `params` prop. A load query has no invoking component, so every declared parameter must have an `optionsBinding` entry:\n\n```json\n{\n  \"parameters\": { \"endpointId\": \"string\", \"showAll\": \"boolean\" },\n  \"optionsBinding\": {\n    \"endpointId\": { \"$option\": \"endpointId\" },\n    \"showAll\": false\n  }\n}\n```\n\nDo not rely on parameter and option names matching. For an invalid-placeholder or unresolved-parameter error on a load query, check missing `optionsBinding` entries before changing placeholder syntax.\n\nBind local controls declaratively:\n\n```jsx\n<TextInput bind=\"search\" label=\"Search\" />\n<DatePicker bind=\"selectedDate\" />\n<Select bind=\"selectedEntity\" data={options.entities} />\n```\n\nBound inputs exist only in memory while the widget is mounted and reset on reload. They are available as `inputs.<bindName>` and are never saved to local storage. Put durable user configuration in options. Do not author raw component callback props.\n\nBinding types follow the component mode. `Accordion multiple`, `Chip.Group multiple`, `TreeSelect mode=\"multiple\"|\"checkbox\"`, and date pickers with `type=\"multiple\"|\"range\"` expose `string[]`. `DateTimePicker` and `InlineDateTimePicker` support `type=\"range\"`, but not `multiple`. Components that do not advertise a temporary bind cannot use `bind`.\n\n## Immutable local bindings\n\nCollection callbacks may use a tightly constrained block body when a value would otherwise be recomputed throughout the returned JSX:\n\n```jsx\n{data.pokemon.map((pokemon) => {\n  const segments = pokemon.url.split(\"/\").filter((part) => part);\n  const dexId = segments.at(-1);\n  const favorite = inputs.favorites.includes(pokemon.name);\n\n  return (\n    <Card key={dexId}>\n      <Text>#{dexId}</Text>\n      <Text>{pokemon.name}</Text>\n      {favorite && <Badge>Favorite</Badge>}\n    </Card>\n  );\n})}\n```\n\nA page-level derived value may use a directly invoked, zero-argument inline arrow:\n\n```jsx\n{(() => {\n  const visiblePokemon = data.pokemon.filter(\n    (pokemon) => !inputs.favoritesOnly || inputs.favorites.includes(pokemon.name),\n  );\n\n  return <Stack>{visiblePokemon.map((pokemon) => <Text>{pokemon.name}</Text>)}</Stack>;\n})()}\n```\n\nA safe block contains one or more `const` declarations followed by exactly one final `return`. Each declaration uses one simple identifier and a required initializer made from existing safe expressions. Earlier local bindings are available to later initializers and to the return expression.\n\nThe following remain invalid:\n\n- `let`, `var`, assignment, update expressions, or destructuring.\n- Function or class declarations, and function values stored in `const`.\n- Loops, `if`, `switch`, `try`, `catch`, `throw`, labels, or `new`.\n- Async functions, generators, `await`, or `yield`.\n- Early or multiple returns.\n- Duplicate local names or shadowing `data`, `status`, `options`, or `inputs`.\n- Invoking a function obtained from API data or a property. Only a directly invoked zero-argument inline arrow is an IIFE.\n\nLocal evaluation shares the parent widget's depth, operation, collection, string, and rendered-node budgets. Blocks cannot reset or evade those limits.\n\nBlock diagnostics include `INVALID_LOCAL_DECLARATION`, `LOCAL_BINDING_REQUIRES_INITIALIZER`, `DUPLICATE_LOCAL_BINDING`, `RESERVED_LOCAL_BINDING`, `UNSUPPORTED_BLOCK_STATEMENT`, `BLOCK_REQUIRES_FINAL_RETURN`, and `CALLBACK_VALUE_NOT_ALLOWED`.\n\n## Arbitrary-depth trees\n\nUse Homarr's trusted `RecursiveList` special form instead of authored recursive functions or Mantine callback props:\n\n```jsx\n<RecursiveList\n  data={data.evolution.chain}\n  childrenPath=\"evolves_to\"\n  keyPath=\"species.name\"\n  maxDepth={16}\n  defaultExpandedDepth={4}\n  showLines\n>\n  {(node, meta) => {\n    const segments = node.species.url.split(\"/\").filter((part) => part);\n    const dexId = segments.at(-1);\n\n    return (\n      <Group gap=\"xs\">\n        <Badge>#{dexId}</Badge>\n        <Text>{node.species.name}</Text>\n        {meta.hasChildren && <Text c=\"dimmed\">{meta.childCount} evolutions</Text>}\n      </Group>\n    );\n  }}\n</RecursiveList>\n```\n\nThe child template receives the current `node` and:\n\n```ts\ninterface RecursiveListMetadata {\n  depth: number;\n  index: number;\n  path: number[];\n  key: string;\n  hasChildren: boolean;\n  childCount: number;\n  isLast: boolean;\n}\n```\n\n`data` accepts one root object or an array of roots. `childrenPath` and `keyPath` use restricted dotted property paths; prototype-related segments are invalid. Missing children mean an empty list. Keys must resolve to primitives; missing or duplicate keys use a stable path fallback and record a warning.\n\nAuthorable presentation props are `data`, `childrenPath`, `keyPath`, `maxDepth`, `maxNodes`, `defaultExpandedDepth`, `indent`, `gap`, and `showLines`. Default limits are depth 16 and 500 nodes. Hard limits are depth 32 and 2,000 nodes. Cycles are detected per ancestor chain. Invalid branches and reached limits render a contained diagnostic or an “Additional levels omitted” row without crashing the tile.\n\nAlways render a useful loading state from `status`, an empty state, a contained error state, and layouts that work at roughly 320, 480, and 720 pixels wide. Use accessible labels and confirmations.\n\nThis reference and the package component references are complete for offline authoring against the matching release. When connected, prefer live component metadata and examples because the installed Homarr and Mantine versions may differ.\n"
    },
    {
      "path": "references/security.md",
      "content": "# Security boundary\n\nHomarr executes requests on the server and constrains them to a declared source. Network scopes, DNS checks, redirect validation, SSRF protection, request/response limits, timeouts, rates, permissions, and secret injection are enforced outside JSX.\n\nNever include secrets in a widget document. Configure them per widget source. Stored plaintext is never returned, duplicated, or exported.\n\nThe runtime blocks imports, hooks, refs, raw callback props, polymorphic roots, provider replacement, arbitrary portals, browser `fetch`, `XMLHttpRequest`, arbitrary JavaScript, evaluation, npm packages, prototype-pollution keys, unsafe URLs, global selectors, and CSS escaping the widget root.\n\nSafe block bodies are not general JavaScript. They permit only immutable `const` declarations with simple identifiers and one final return. Mutation, assignments, declarations of callable values, control-flow statements, async behavior, reserved-root shadowing, and multiple returns are rejected before rendering. A zero-argument IIFE is callable only when its callee is the inline arrow syntax itself. Values obtained from API data can never become executable callbacks.\n\nCollection callbacks, zero-argument derived-value IIFEs, and the `RecursiveList` child template execute inside the interpreter and share the parent widget's budgets. They are never passed to Mantine or React as authored callbacks.\n\n`RecursiveList` is a Homarr-owned traversal boundary, not general recursion. It validates dotted paths, rejects prototype-related segments, treats API objects as read-only, contains malformed branches, detects ancestor cycles, and enforces both depth and node caps. Defaults are 16 levels and 500 nodes; hard maximums are 32 levels and 2,000 nodes. Reaching a cap records a diagnostic and renders an omission row rather than throwing outside the widget.\n\nDo not work around a blocked capability. Express network behavior as a named request and interaction as a declarative Homarr component. Require explicit confirmation for destructive actions. Never let actions trigger on load.\n\nTreat request/response journals and diagnostics as sensitive. Homarr redacts credentials, but an agent should also avoid repeating private URLs, request bodies, or personal data unless necessary to fix the widget.\n\nThe installed static references describe the complete offline capability boundary for their matching release. When Homarr exposes live schema or component metadata, that metadata wins if it differs.\n"
    },
    {
      "path": "references/components.md",
      "content": "# Component catalog\n\n> Generated from `component-catalog-v1.json`. Catalog schema v1 · Custom Widget 2.0.0 · Mantine 9.4.1. Do not edit this file by hand.\n\nThis is the complete offline Custom JSX component contract for this Homarr release. When connected to Homarr, prefer the live catalog because the installed release may differ. The catalog is descriptive, not a prop allowlist: ordinary serializable props pass through unless the capability boundary explicitly blocks them.\n\n## Package references\n\n- [Mantine Core](mantine-core.md) — 265 enabled, 133 denied\n- [Mantine Dates](mantine-dates.md) — 29 enabled, 3 denied\n- [Mantine Charts](mantine-charts.md) — 18 enabled, 1 denied\n- [Homarr components](homarr-components.md) — 13 enabled, 0 denied\n\n## Authoring boundary\n\n- Use the exact component names below. Compound names such as `Tabs.List`, `Card.Section`, and `Radio.Group` are distinct catalog entries.\n- The effective prop API is the shared prop table plus the component-specific table in the package reference. A component-specific record overrides the shared record with the same name.\n- Use `bind=\"name\"` only when a component record declares bind metadata. Read the temporary in-memory value from `inputs.name`; it is never persisted.\n- Ordinary authored callbacks remain blocked. Restricted collection callbacks, directly invoked zero-argument derived-value IIFEs, and `RecursiveList`'s child template may use the immutable local `const` grammar in [JSX runtime](runtime.md#immutable-local-bindings).\n- Use [`RecursiveList`](homarr-components.md#component-recursivelist) for custom arbitrary-depth trees. Do not author recursion or pass a renderer callback to Mantine Tree.\n- Unknown ordinary Mantine props are advisory and are not silently discarded. Every capability listed in the blocked table is rejected.\n\n## Complete enabled inventory\n\n### Mantine Core\n\n[`Accordion`](mantine-core.md#component-accordion), [`Accordion.Chevron`](mantine-core.md#component-accordion-2e-chevron), [`Accordion.Control`](mantine-core.md#component-accordion-2e-control), [`Accordion.Item`](mantine-core.md#component-accordion-2e-item), [`Accordion.Panel`](mantine-core.md#component-accordion-2e-panel), [`AccordionChevron`](mantine-core.md#component-accordionchevron), [`AccordionControl`](mantine-core.md#component-accordioncontrol), [`AccordionItem`](mantine-core.md#component-accordionitem), [`AccordionPanel`](mantine-core.md#component-accordionpanel), [`ActionIcon`](mantine-core.md#component-actionicon), [`ActionIcon.Group`](mantine-core.md#component-actionicon-2e-group), [`ActionIcon.GroupSection`](mantine-core.md#component-actionicon-2e-groupsection), [`ActionIconGroup`](mantine-core.md#component-actionicongroup), [`ActionIconGroupSection`](mantine-core.md#component-actionicongroupsection), [`Alert`](mantine-core.md#component-alert), [`AlphaSlider`](mantine-core.md#component-alphaslider), [`Anchor`](mantine-core.md#component-anchor), [`AngleSlider`](mantine-core.md#component-angleslider), [`AspectRatio`](mantine-core.md#component-aspectratio), [`Autocomplete`](mantine-core.md#component-autocomplete), [`Avatar`](mantine-core.md#component-avatar), [`Avatar.Group`](mantine-core.md#component-avatar-2e-group), [`AvatarGroup`](mantine-core.md#component-avatargroup), [`BackgroundImage`](mantine-core.md#component-backgroundimage), [`Badge`](mantine-core.md#component-badge), [`Blockquote`](mantine-core.md#component-blockquote), [`Box`](mantine-core.md#component-box), [`Breadcrumbs`](mantine-core.md#component-breadcrumbs), [`Burger`](mantine-core.md#component-burger), [`Button`](mantine-core.md#component-button), [`Button.Group`](mantine-core.md#component-button-2e-group), [`Button.GroupSection`](mantine-core.md#component-button-2e-groupsection), [`ButtonGroup`](mantine-core.md#component-buttongroup), [`ButtonGroupSection`](mantine-core.md#component-buttongroupsection), [`Card`](mantine-core.md#component-card), [`Card.Section`](mantine-core.md#component-card-2e-section), [`CardSection`](mantine-core.md#component-cardsection), [`Center`](mantine-core.md#component-center), [`CheckIcon`](mantine-core.md#component-checkicon), [`Checkbox`](mantine-core.md#component-checkbox), [`Checkbox.Card`](mantine-core.md#component-checkbox-2e-card), [`Checkbox.Group`](mantine-core.md#component-checkbox-2e-group), [`Checkbox.Indicator`](mantine-core.md#component-checkbox-2e-indicator), [`CheckboxCard`](mantine-core.md#component-checkboxcard), [`CheckboxGroup`](mantine-core.md#component-checkboxgroup), [`CheckboxIndicator`](mantine-core.md#component-checkboxindicator), [`Chip`](mantine-core.md#component-chip), [`Chip.Group`](mantine-core.md#component-chip-2e-group), [`ChipGroup`](mantine-core.md#component-chipgroup), [`CloseButton`](mantine-core.md#component-closebutton), [`CloseIcon`](mantine-core.md#component-closeicon), [`Code`](mantine-core.md#component-code), [`Collapse`](mantine-core.md#component-collapse), [`ColorInput`](mantine-core.md#component-colorinput), [`ColorPicker`](mantine-core.md#component-colorpicker), [`ColorSwatch`](mantine-core.md#component-colorswatch), [`Container`](mantine-core.md#component-container), [`CopyButton`](mantine-core.md#component-copybutton), [`DataList`](mantine-core.md#component-datalist), [`DataList.Item`](mantine-core.md#component-datalist-2e-item), [`DataList.ItemLabel`](mantine-core.md#component-datalist-2e-itemlabel), [`DataList.ItemValue`](mantine-core.md#component-datalist-2e-itemvalue), [`DataListItem`](mantine-core.md#component-datalistitem), [`DataListItemLabel`](mantine-core.md#component-datalistitemlabel), [`DataListItemValue`](mantine-core.md#component-datalistitemvalue), [`Divider`](mantine-core.md#component-divider), [`EmptyState`](mantine-core.md#component-emptystate), [`EmptyState.Actions`](mantine-core.md#component-emptystate-2e-actions), [`EmptyState.Description`](mantine-core.md#component-emptystate-2e-description), [`EmptyState.Indicator`](mantine-core.md#component-emptystate-2e-indicator), [`EmptyState.Title`](mantine-core.md#component-emptystate-2e-title), [`EmptyStateActions`](mantine-core.md#component-emptystateactions), [`EmptyStateDescription`](mantine-core.md#component-emptystatedescription), [`EmptyStateIndicator`](mantine-core.md#component-emptystateindicator), [`EmptyStateTitle`](mantine-core.md#component-emptystatetitle), [`Fieldset`](mantine-core.md#component-fieldset), [`FlatTreeNode`](mantine-core.md#component-flattreenode), [`Flex`](mantine-core.md#component-flex), [`FloatingArrow`](mantine-core.md#component-floatingarrow), [`FloatingIndicator`](mantine-core.md#component-floatingindicator), [`Grid`](mantine-core.md#component-grid), [`Grid.Col`](mantine-core.md#component-grid-2e-col), [`GridCol`](mantine-core.md#component-gridcol), [`Group`](mantine-core.md#component-group), [`Highlight`](mantine-core.md#component-highlight), [`HoverCard`](mantine-core.md#component-hovercard), [`HoverCard.Dropdown`](mantine-core.md#component-hovercard-2e-dropdown), [`HoverCard.Group`](mantine-core.md#component-hovercard-2e-group), [`HoverCard.Target`](mantine-core.md#component-hovercard-2e-target), [`HoverCardDropdown`](mantine-core.md#component-hovercarddropdown), [`HoverCardGroup`](mantine-core.md#component-hovercardgroup), [`HoverCardTarget`](mantine-core.md#component-hovercardtarget), [`HueSlider`](mantine-core.md#component-hueslider), [`Image`](mantine-core.md#component-image), [`Indicator`](mantine-core.md#component-indicator), [`JsonInput`](mantine-core.md#component-jsoninput), [`Kbd`](mantine-core.md#component-kbd), [`List`](mantine-core.md#component-list), [`List.Item`](mantine-core.md#component-list-2e-item), [`ListItem`](mantine-core.md#component-listitem), [`Loader`](mantine-core.md#component-loader), [`LoadingOverlay`](mantine-core.md#component-loadingoverlay), [`Mark`](mantine-core.md#component-mark), [`Marquee`](mantine-core.md#component-marquee), [`MaskInput`](mantine-core.md#component-maskinput), [`Menu`](mantine-core.md#component-menu), [`Menu.CheckboxGroup`](mantine-core.md#component-menu-2e-checkboxgroup), [`Menu.CheckboxItem`](mantine-core.md#component-menu-2e-checkboxitem), [`Menu.ContextMenu`](mantine-core.md#component-menu-2e-contextmenu), [`Menu.Divider`](mantine-core.md#component-menu-2e-divider), [`Menu.Dropdown`](mantine-core.md#component-menu-2e-dropdown), [`Menu.Item`](mantine-core.md#component-menu-2e-item), [`Menu.Label`](mantine-core.md#component-menu-2e-label), [`Menu.RadioGroup`](mantine-core.md#component-menu-2e-radiogroup), [`Menu.RadioItem`](mantine-core.md#component-menu-2e-radioitem), [`Menu.Search`](mantine-core.md#component-menu-2e-search), [`Menu.Sub`](mantine-core.md#component-menu-2e-sub), [`Menu.Target`](mantine-core.md#component-menu-2e-target), [`MenuCheckboxGroup`](mantine-core.md#component-menucheckboxgroup), [`MenuCheckboxItem`](mantine-core.md#component-menucheckboxitem), [`MenuContextMenu`](mantine-core.md#component-menucontextmenu), [`MenuDivider`](mantine-core.md#component-menudivider), [`MenuDropdown`](mantine-core.md#component-menudropdown), [`MenuItem`](mantine-core.md#component-menuitem), [`MenuLabel`](mantine-core.md#component-menulabel), [`MenuRadioGroup`](mantine-core.md#component-menuradiogroup), [`MenuRadioItem`](mantine-core.md#component-menuradioitem), [`MenuSearch`](mantine-core.md#component-menusearch), [`MenuSub`](mantine-core.md#component-menusub), [`MenuSub.Dropdown`](mantine-core.md#component-menusub-2e-dropdown), [`MenuSub.Item`](mantine-core.md#component-menusub-2e-item), [`MenuSub.Target`](mantine-core.md#component-menusub-2e-target), [`MenuSubDropdown`](mantine-core.md#component-menusubdropdown), [`MenuSubItem`](mantine-core.md#component-menusubitem), [`MenuSubTarget`](mantine-core.md#component-menusubtarget), [`MenuTarget`](mantine-core.md#component-menutarget), [`MultiSelect`](mantine-core.md#component-multiselect), [`NativeScrollArea`](mantine-core.md#component-nativescrollarea), [`NativeSelect`](mantine-core.md#component-nativeselect), [`NavLink`](mantine-core.md#component-navlink), [`Notification`](mantine-core.md#component-notification), [`NumberFormatter`](mantine-core.md#component-numberformatter), [`NumberInput`](mantine-core.md#component-numberinput), [`OverflowList`](mantine-core.md#component-overflowlist), [`Overlay`](mantine-core.md#component-overlay), [`Pagination`](mantine-core.md#component-pagination), [`Pagination.Control`](mantine-core.md#component-pagination-2e-control), [`Pagination.Dots`](mantine-core.md#component-pagination-2e-dots), [`Pagination.First`](mantine-core.md#component-pagination-2e-first), [`Pagination.Items`](mantine-core.md#component-pagination-2e-items), [`Pagination.Label`](mantine-core.md#component-pagination-2e-label), [`Pagination.Last`](mantine-core.md#component-pagination-2e-last), [`Pagination.Next`](mantine-core.md#component-pagination-2e-next), [`Pagination.Previous`](mantine-core.md#component-pagination-2e-previous), [`Pagination.Root`](mantine-core.md#component-pagination-2e-root), [`PaginationControl`](mantine-core.md#component-paginationcontrol), [`PaginationDots`](mantine-core.md#component-paginationdots), [`PaginationFirst`](mantine-core.md#component-paginationfirst), [`PaginationItems`](mantine-core.md#component-paginationitems), [`PaginationLabel`](mantine-core.md#component-paginationlabel), [`PaginationLast`](mantine-core.md#component-paginationlast), [`PaginationNext`](mantine-core.md#component-paginationnext), [`PaginationPrevious`](mantine-core.md#component-paginationprevious), [`PaginationRoot`](mantine-core.md#component-paginationroot), [`Paper`](mantine-core.md#component-paper), [`PasswordInput`](mantine-core.md#component-passwordinput), [`Pill`](mantine-core.md#component-pill), [`Pill.Group`](mantine-core.md#component-pill-2e-group), [`PillGroup`](mantine-core.md#component-pillgroup), [`PinInput`](mantine-core.md#component-pininput), [`Popover`](mantine-core.md#component-popover), [`Popover.ContextMenu`](mantine-core.md#component-popover-2e-contextmenu), [`Popover.Dropdown`](mantine-core.md#component-popover-2e-dropdown), [`Popover.Target`](mantine-core.md#component-popover-2e-target), [`PopoverContextMenu`](mantine-core.md#component-popovercontextmenu), [`PopoverDropdown`](mantine-core.md#component-popoverdropdown), [`PopoverTarget`](mantine-core.md#component-popovertarget), [`Progress`](mantine-core.md#component-progress), [`Progress.Label`](mantine-core.md#component-progress-2e-label), [`Progress.Root`](mantine-core.md#component-progress-2e-root), [`Progress.Section`](mantine-core.md#component-progress-2e-section), [`ProgressLabel`](mantine-core.md#component-progresslabel), [`ProgressRoot`](mantine-core.md#component-progressroot), [`ProgressSection`](mantine-core.md#component-progresssection), [`Radio`](mantine-core.md#component-radio), [`Radio.Card`](mantine-core.md#component-radio-2e-card), [`Radio.Group`](mantine-core.md#component-radio-2e-group), [`Radio.Indicator`](mantine-core.md#component-radio-2e-indicator), [`RadioCard`](mantine-core.md#component-radiocard), [`RadioGroup`](mantine-core.md#component-radiogroup), [`RadioIcon`](mantine-core.md#component-radioicon), [`RadioIndicator`](mantine-core.md#component-radioindicator), [`RangeSlider`](mantine-core.md#component-rangeslider), [`Rating`](mantine-core.md#component-rating), [`RingProgress`](mantine-core.md#component-ringprogress), [`RollingNumber`](mantine-core.md#component-rollingnumber), [`ScrollArea`](mantine-core.md#component-scrollarea), [`ScrollArea.Autosize`](mantine-core.md#component-scrollarea-2e-autosize), [`ScrollAreaAutosize`](mantine-core.md#component-scrollareaautosize), [`Scroller`](mantine-core.md#component-scroller), [`SegmentedControl`](mantine-core.md#component-segmentedcontrol), [`Select`](mantine-core.md#component-select), [`SemiCircleProgress`](mantine-core.md#component-semicircleprogress), [`SimpleGrid`](mantine-core.md#component-simplegrid), [`Skeleton`](mantine-core.md#component-skeleton), [`Slider`](mantine-core.md#component-slider), [`Space`](mantine-core.md#component-space), [`Splitter`](mantine-core.md#component-splitter), [`Splitter.Pane`](mantine-core.md#component-splitter-2e-pane), [`SplitterPane`](mantine-core.md#component-splitterpane), [`Spoiler`](mantine-core.md#component-spoiler), [`Stack`](mantine-core.md#component-stack), [`Stepper`](mantine-core.md#component-stepper), [`Stepper.Completed`](mantine-core.md#component-stepper-2e-completed), [`Stepper.Step`](mantine-core.md#component-stepper-2e-step), [`StepperCompleted`](mantine-core.md#component-steppercompleted), [`StepperStep`](mantine-core.md#component-stepperstep), [`Switch`](mantine-core.md#component-switch), [`Switch.Group`](mantine-core.md#component-switch-2e-group), [`SwitchGroup`](mantine-core.md#component-switchgroup), [`Table`](mantine-core.md#component-table), [`Table.Caption`](mantine-core.md#component-table-2e-caption), [`Table.DataRenderer`](mantine-core.md#component-table-2e-datarenderer), [`Table.ScrollContainer`](mantine-core.md#component-table-2e-scrollcontainer), [`Table.Tbody`](mantine-core.md#component-table-2e-tbody), [`Table.Td`](mantine-core.md#component-table-2e-td), [`Table.Tfoot`](mantine-core.md#component-table-2e-tfoot), [`Table.Th`](mantine-core.md#component-table-2e-th), [`Table.Thead`](mantine-core.md#component-table-2e-thead), [`Table.Tr`](mantine-core.md#component-table-2e-tr), [`TableCaption`](mantine-core.md#component-tablecaption), [`TableScrollContainer`](mantine-core.md#component-tablescrollcontainer), [`TableTbody`](mantine-core.md#component-tabletbody), [`TableTd`](mantine-core.md#component-tabletd), [`TableTfoot`](mantine-core.md#component-tabletfoot), [`TableTh`](mantine-core.md#component-tableth), [`TableThead`](mantine-core.md#component-tablethead), [`TableTr`](mantine-core.md#component-tabletr), [`Tabs`](mantine-core.md#component-tabs), [`Tabs.List`](mantine-core.md#component-tabs-2e-list), [`Tabs.Panel`](mantine-core.md#component-tabs-2e-panel), [`Tabs.Tab`](mantine-core.md#component-tabs-2e-tab), [`TabsList`](mantine-core.md#component-tabslist), [`TabsPanel`](mantine-core.md#component-tabspanel), [`TabsTab`](mantine-core.md#component-tabstab), [`TagsInput`](mantine-core.md#component-tagsinput), [`Text`](mantine-core.md#component-text), [`TextInput`](mantine-core.md#component-textinput), [`Textarea`](mantine-core.md#component-textarea), [`ThemeIcon`](mantine-core.md#component-themeicon), [`Timeline`](mantine-core.md#component-timeline), [`Timeline.Item`](mantine-core.md#component-timeline-2e-item), [`TimelineItem`](mantine-core.md#component-timelineitem), [`Title`](mantine-core.md#component-title), [`Tooltip`](mantine-core.md#component-tooltip), [`Tooltip.Floating`](mantine-core.md#component-tooltip-2e-floating), [`Tooltip.Group`](mantine-core.md#component-tooltip-2e-group), [`TooltipFloating`](mantine-core.md#component-tooltipfloating), [`TooltipGroup`](mantine-core.md#component-tooltipgroup), [`Tree`](mantine-core.md#component-tree), [`TreeSelect`](mantine-core.md#component-treeselect), [`TreeSelectOption`](mantine-core.md#component-treeselectoption), [`Typography`](mantine-core.md#component-typography), [`UnstyledButton`](mantine-core.md#component-unstyledbutton), [`VisuallyHidden`](mantine-core.md#component-visuallyhidden)\n\n### Mantine Dates\n\n[`Calendar`](mantine-dates.md#component-calendar), [`CalendarHeader`](mantine-dates.md#component-calendarheader), [`DateInput`](mantine-dates.md#component-dateinput), [`DatePicker`](mantine-dates.md#component-datepicker), [`DatePickerInput`](mantine-dates.md#component-datepickerinput), [`DateTimePicker`](mantine-dates.md#component-datetimepicker), [`Day`](mantine-dates.md#component-day), [`DecadeLevel`](mantine-dates.md#component-decadelevel), [`DecadeLevelGroup`](mantine-dates.md#component-decadelevelgroup), [`InlineDateTimePicker`](mantine-dates.md#component-inlinedatetimepicker), [`LevelsGroup`](mantine-dates.md#component-levelsgroup), [`MiniCalendar`](mantine-dates.md#component-minicalendar), [`Month`](mantine-dates.md#component-month), [`MonthLevel`](mantine-dates.md#component-monthlevel), [`MonthLevelGroup`](mantine-dates.md#component-monthlevelgroup), [`MonthPicker`](mantine-dates.md#component-monthpicker), [`MonthPickerInput`](mantine-dates.md#component-monthpickerinput), [`MonthsList`](mantine-dates.md#component-monthslist), [`PickerControl`](mantine-dates.md#component-pickercontrol), [`TimeGrid`](mantine-dates.md#component-timegrid), [`TimeInput`](mantine-dates.md#component-timeinput), [`TimePicker`](mantine-dates.md#component-timepicker), [`TimeValue`](mantine-dates.md#component-timevalue), [`WeekdaysRow`](mantine-dates.md#component-weekdaysrow), [`YearLevel`](mantine-dates.md#component-yearlevel), [`YearLevelGroup`](mantine-dates.md#component-yearlevelgroup), [`YearPicker`](mantine-dates.md#component-yearpicker), [`YearPickerInput`](mantine-dates.md#component-yearpickerinput), [`YearsList`](mantine-dates.md#component-yearslist)\n\n### Mantine Charts\n\n[`AreaChart`](mantine-charts.md#component-areachart), [`BarChart`](mantine-charts.md#component-barchart), [`BarsList`](mantine-charts.md#component-barslist), [`BubbleChart`](mantine-charts.md#component-bubblechart), [`ChartLegend`](mantine-charts.md#component-chartlegend), [`ChartTooltip`](mantine-charts.md#component-charttooltip), [`CompositeChart`](mantine-charts.md#component-compositechart), [`DonutChart`](mantine-charts.md#component-donutchart), [`FunnelChart`](mantine-charts.md#component-funnelchart), [`Heatmap`](mantine-charts.md#component-heatmap), [`LineChart`](mantine-charts.md#component-linechart), [`PieChart`](mantine-charts.md#component-piechart), [`RadarChart`](mantine-charts.md#component-radarchart), [`RadialBarChart`](mantine-charts.md#component-radialbarchart), [`SankeyChart`](mantine-charts.md#component-sankeychart), [`ScatterChart`](mantine-charts.md#component-scatterchart), [`Sparkline`](mantine-charts.md#component-sparkline), [`Treemap`](mantine-charts.md#component-treemap)\n\n### Homarr components\n\n[`ActionButton`](homarr-components.md#component-actionbutton), [`Collapsible`](homarr-components.md#component-collapsible), [`PaginatedList`](homarr-components.md#component-paginatedlist), [`RecursiveList`](homarr-components.md#component-recursivelist), [`RefreshButton`](homarr-components.md#component-refreshbutton), [`StatBar`](homarr-components.md#component-statbar), [`SubData`](homarr-components.md#component-subdata), [`SubFetch`](homarr-components.md#component-subfetch), [`TabPanel`](homarr-components.md#component-tabpanel), [`TablerIcon`](homarr-components.md#component-tablericon), [`TabsContainer`](homarr-components.md#component-tabscontainer), [`ToggleSwitch`](homarr-components.md#component-toggleswitch), [`TypeBadge`](homarr-components.md#component-typebadge)\n\n\n## Complete denied inventory\n\n### Mantine Core\n\n[`Affix`](mantine-core.md#component-affix) — Escapes the widget layout boundary, [`AppShell`](mantine-core.md#component-appshell) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShell.Aside`](mantine-core.md#component-appshell-2e-aside) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShell.Footer`](mantine-core.md#component-appshell-2e-footer) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShell.Header`](mantine-core.md#component-appshell-2e-header) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShell.Main`](mantine-core.md#component-appshell-2e-main) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShell.Navbar`](mantine-core.md#component-appshell-2e-navbar) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShell.Section`](mantine-core.md#component-appshell-2e-section) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShellAside`](mantine-core.md#component-appshellaside) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShellFooter`](mantine-core.md#component-appshellfooter) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShellHeader`](mantine-core.md#component-appshellheader) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShellMain`](mantine-core.md#component-appshellmain) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShellNavbar`](mantine-core.md#component-appshellnavbar) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`AppShellSection`](mantine-core.md#component-appshellsection) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ColorSchemeScript`](mantine-core.md#component-colorschemescript) — Writes global document state, [`Combobox`](mantine-core.md#component-combobox) — Low-level composition primitive that requires authored callbacks, [`Combobox.Chevron`](mantine-core.md#component-combobox-2e-chevron) — Low-level composition primitive that requires authored callbacks, [`Combobox.ClearButton`](mantine-core.md#component-combobox-2e-clearbutton) — Low-level composition primitive that requires authored callbacks, [`Combobox.Dropdown`](mantine-core.md#component-combobox-2e-dropdown) — Low-level composition primitive that requires authored callbacks, [`Combobox.DropdownTarget`](mantine-core.md#component-combobox-2e-dropdowntarget) — Low-level composition primitive that requires authored callbacks, [`Combobox.Empty`](mantine-core.md#component-combobox-2e-empty) — Low-level composition primitive that requires authored callbacks, [`Combobox.EventsTarget`](mantine-core.md#component-combobox-2e-eventstarget) — Low-level composition primitive that requires authored callbacks, [`Combobox.Footer`](mantine-core.md#component-combobox-2e-footer) — Low-level composition primitive that requires authored callbacks, [`Combobox.Group`](mantine-core.md#component-combobox-2e-group) — Low-level composition primitive that requires authored callbacks, [`Combobox.Header`](mantine-core.md#component-combobox-2e-header) — Low-level composition primitive that requires authored callbacks, [`Combobox.HiddenInput`](mantine-core.md#component-combobox-2e-hiddeninput) — Low-level composition primitive that requires authored callbacks, [`Combobox.Option`](mantine-core.md#component-combobox-2e-option) — Low-level composition primitive that requires authored callbacks, [`Combobox.Options`](mantine-core.md#component-combobox-2e-options) — Low-level composition primitive that requires authored callbacks, [`Combobox.Search`](mantine-core.md#component-combobox-2e-search) — Low-level composition primitive that requires authored callbacks, [`Combobox.Target`](mantine-core.md#component-combobox-2e-target) — Low-level composition primitive that requires authored callbacks, [`ComboboxChevron`](mantine-core.md#component-comboboxchevron) — Low-level composition primitive that requires authored callbacks, [`ComboboxClearButton`](mantine-core.md#component-comboboxclearbutton) — Low-level composition primitive that requires authored callbacks, [`ComboboxDropdown`](mantine-core.md#component-comboboxdropdown) — Low-level composition primitive that requires authored callbacks, [`ComboboxDropdownTarget`](mantine-core.md#component-comboboxdropdowntarget) — Low-level composition primitive that requires authored callbacks, [`ComboboxEmpty`](mantine-core.md#component-comboboxempty) — Low-level composition primitive that requires authored callbacks, [`ComboboxEventsTarget`](mantine-core.md#component-comboboxeventstarget) — Low-level composition primitive that requires authored callbacks, [`ComboboxFooter`](mantine-core.md#component-comboboxfooter) — Low-level composition primitive that requires authored callbacks, [`ComboboxGroup`](mantine-core.md#component-comboboxgroup) — Low-level composition primitive that requires authored callbacks, [`ComboboxHeader`](mantine-core.md#component-comboboxheader) — Low-level composition primitive that requires authored callbacks, [`ComboboxHiddenInput`](mantine-core.md#component-comboboxhiddeninput) — Low-level composition primitive that requires authored callbacks, [`ComboboxOption`](mantine-core.md#component-comboboxoption) — Low-level composition primitive that requires authored callbacks, [`ComboboxOptions`](mantine-core.md#component-comboboxoptions) — Low-level composition primitive that requires authored callbacks, [`ComboboxPopover`](mantine-core.md#component-comboboxpopover) — Low-level composition primitive that requires authored callbacks, [`ComboboxPopover.Target`](mantine-core.md#component-comboboxpopover-2e-target) — Low-level composition primitive that requires authored callbacks, [`ComboboxPopoverTarget`](mantine-core.md#component-comboboxpopovertarget) — Low-level composition primitive that requires authored callbacks, [`ComboboxSearch`](mantine-core.md#component-comboboxsearch) — Low-level composition primitive that requires authored callbacks, [`ComboboxTarget`](mantine-core.md#component-comboboxtarget) — Low-level composition primitive that requires authored callbacks, [`Dialog`](mantine-core.md#component-dialog) — Escapes the widget layout and focus boundary, [`DirectionProvider`](mantine-core.md#component-directionprovider) — Replaces a Homarr-owned provider boundary, [`Drawer`](mantine-core.md#component-drawer) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Drawer.Body`](mantine-core.md#component-drawer-2e-body) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Drawer.CloseButton`](mantine-core.md#component-drawer-2e-closebutton) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Drawer.Content`](mantine-core.md#component-drawer-2e-content) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Drawer.Header`](mantine-core.md#component-drawer-2e-header) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Drawer.Overlay`](mantine-core.md#component-drawer-2e-overlay) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Drawer.Root`](mantine-core.md#component-drawer-2e-root) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Drawer.Stack`](mantine-core.md#component-drawer-2e-stack) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Drawer.Title`](mantine-core.md#component-drawer-2e-title) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`DrawerBody`](mantine-core.md#component-drawerbody) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`DrawerCloseButton`](mantine-core.md#component-drawerclosebutton) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`DrawerContent`](mantine-core.md#component-drawercontent) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`DrawerHeader`](mantine-core.md#component-drawerheader) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`DrawerOverlay`](mantine-core.md#component-draweroverlay) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`DrawerRoot`](mantine-core.md#component-drawerroot) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`DrawerStack`](mantine-core.md#component-drawerstack) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`DrawerTitle`](mantine-core.md#component-drawertitle) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`FileButton`](mantine-core.md#component-filebutton) — Requests local file-system access, [`FileInput`](mantine-core.md#component-fileinput) — Requests local file-system access, [`FloatingWindow`](mantine-core.md#component-floatingwindow) — Creates a separate browser window, [`FocusTrap`](mantine-core.md#component-focustrap) — Can capture focus outside the widget interaction flow, [`FocusTrap.InitialFocus`](mantine-core.md#component-focustrap-2e-initialfocus) — Can capture focus outside the widget interaction flow, [`FocusTrapInitialFocus`](mantine-core.md#component-focustrapinitialfocus) — Can capture focus outside the widget interaction flow, [`HeadlessMantineProvider`](mantine-core.md#component-headlessmantineprovider) — Replaces a Homarr-owned provider boundary, [`InlineStyles`](mantine-core.md#component-inlinestyles) — Writes unscoped style rules, [`Input`](mantine-core.md#component-input) — Low-level composition primitive that requires authored callbacks, [`Input.ClearButton`](mantine-core.md#component-input-2e-clearbutton) — Low-level composition primitive that requires authored callbacks, [`Input.Description`](mantine-core.md#component-input-2e-description) — Low-level composition primitive that requires authored callbacks, [`Input.Error`](mantine-core.md#component-input-2e-error) — Low-level composition primitive that requires authored callbacks, [`Input.Label`](mantine-core.md#component-input-2e-label) — Low-level composition primitive that requires authored callbacks, [`Input.Placeholder`](mantine-core.md#component-input-2e-placeholder) — Low-level composition primitive that requires authored callbacks, [`Input.Success`](mantine-core.md#component-input-2e-success) — Low-level composition primitive that requires authored callbacks, [`Input.Wrapper`](mantine-core.md#component-input-2e-wrapper) — Low-level composition primitive that requires authored callbacks, [`InputBase`](mantine-core.md#component-inputbase) — Low-level composition primitive that requires authored callbacks, [`InputClearButton`](mantine-core.md#component-inputclearbutton) — Low-level composition primitive that requires authored callbacks, [`InputClearSection`](mantine-core.md#component-inputclearsection) — Low-level composition primitive that requires authored callbacks, [`InputDescription`](mantine-core.md#component-inputdescription) — Low-level composition primitive that requires authored callbacks, [`InputError`](mantine-core.md#component-inputerror) — Low-level composition primitive that requires authored callbacks, [`InputLabel`](mantine-core.md#component-inputlabel) — Low-level composition primitive that requires authored callbacks, [`InputPlaceholder`](mantine-core.md#component-inputplaceholder) — Low-level composition primitive that requires authored callbacks, [`InputSuccess`](mantine-core.md#component-inputsuccess) — Low-level composition primitive that requires authored callbacks, [`InputWrapper`](mantine-core.md#component-inputwrapper) — Low-level composition primitive that requires authored callbacks, [`MantineProvider`](mantine-core.md#component-mantineprovider) — Replaces a Homarr-owned provider boundary, [`MantineThemeProvider`](mantine-core.md#component-mantinethemeprovider) — Replaces a Homarr-owned provider boundary, [`Menubar`](mantine-core.md#component-menubar) — Low-level composition primitive that requires authored callbacks, [`Menubar.Dropdown`](mantine-core.md#component-menubar-2e-dropdown) — Low-level composition primitive that requires authored callbacks, [`Menubar.Menu`](mantine-core.md#component-menubar-2e-menu) — Low-level composition primitive that requires authored callbacks, [`Menubar.Target`](mantine-core.md#component-menubar-2e-target) — Low-level composition primitive that requires authored callbacks, [`MenubarDropdown`](mantine-core.md#component-menubardropdown) — Low-level composition primitive that requires authored callbacks, [`MenubarMenu`](mantine-core.md#component-menubarmenu) — Low-level composition primitive that requires authored callbacks, [`MenubarTarget`](mantine-core.md#component-menubartarget) — Low-level composition primitive that requires authored callbacks, [`Modal`](mantine-core.md#component-modal) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Modal.Body`](mantine-core.md#component-modal-2e-body) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Modal.CloseButton`](mantine-core.md#component-modal-2e-closebutton) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Modal.Content`](mantine-core.md#component-modal-2e-content) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Modal.Header`](mantine-core.md#component-modal-2e-header) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Modal.Overlay`](mantine-core.md#component-modal-2e-overlay) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Modal.Root`](mantine-core.md#component-modal-2e-root) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Modal.Stack`](mantine-core.md#component-modal-2e-stack) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`Modal.Title`](mantine-core.md#component-modal-2e-title) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalBase`](mantine-core.md#component-modalbase) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalBaseBody`](mantine-core.md#component-modalbasebody) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalBaseCloseButton`](mantine-core.md#component-modalbaseclosebutton) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalBaseContent`](mantine-core.md#component-modalbasecontent) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalBaseHeader`](mantine-core.md#component-modalbaseheader) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalBaseOverlay`](mantine-core.md#component-modalbaseoverlay) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalBaseTitle`](mantine-core.md#component-modalbasetitle) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalBody`](mantine-core.md#component-modalbody) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalCloseButton`](mantine-core.md#component-modalclosebutton) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalContent`](mantine-core.md#component-modalcontent) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalHeader`](mantine-core.md#component-modalheader) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalOverlay`](mantine-core.md#component-modaloverlay) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalRoot`](mantine-core.md#component-modalroot) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalStack`](mantine-core.md#component-modalstack) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`ModalTitle`](mantine-core.md#component-modaltitle) — Escapes or replaces the widget layout, focus, scrolling, or overlay boundary, [`OptionalPortal`](mantine-core.md#component-optionalportal) — Can render outside the widget root, [`OptionsDropdown`](mantine-core.md#component-optionsdropdown) — Low-level composition primitive that requires authored callbacks, [`PillsInput`](mantine-core.md#component-pillsinput) — Low-level composition primitive that requires authored callbacks, [`PillsInput.Field`](mantine-core.md#component-pillsinput-2e-field) — Low-level composition primitive that requires authored callbacks, [`PillsInputField`](mantine-core.md#component-pillsinputfield) — Low-level composition primitive that requires authored callbacks, [`Portal`](mantine-core.md#component-portal) — Can render outside the widget root, [`RemoveScroll`](mantine-core.md#component-removescroll) — Changes global page scrolling, [`TableOfContents`](mantine-core.md#component-tableofcontents) — Observes headings and scrolling outside the widget root, [`Transition`](mantine-core.md#component-transition) — Requires an authored render callback\n\n### Mantine Dates\n\n[`DatesProvider`](mantine-dates.md#component-datesprovider) — Replaces a Homarr-owned provider boundary, [`HiddenDatesInput`](mantine-dates.md#component-hiddendatesinput) — Internal date-input primitive, [`PickerInputBase`](mantine-dates.md#component-pickerinputbase) — Internal date-input primitive\n\n### Mantine Charts\n\n[`AreaGradient`](mantine-charts.md#component-areagradient) — Low-level chart implementation helper\n\n### Homarr components\n\n_None._\n\n\n## Shared prop API\n\nThese props are available to enabled components unless a component-specific record overrides the same name.\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>abbr</code> | no | <code>string</code> | — | — |\n| <code>about</code> | no | <code>string</code> | — | — |\n| <code>accentHeight</code> | no | <code>string &#124; number</code> | — | — |\n| <code>accept</code> | no | <code>string</code> | — | — |\n| <code>accessKey</code> | no | <code>string</code> | — | — |\n| <code>accumulate</code> | no | <code>\"none\" &#124; \"sum\"</code> | <code>\"none\"</code>, <code>\"sum\"</code> | — |\n| <code>additive</code> | no | <code>\"sum\" &#124; \"replace\"</code> | <code>\"replace\"</code>, <code>\"sum\"</code> | — |\n| <code>align</code> | no | <code>\"center\" &#124; \"left\" &#124; \"right\"</code> | <code>\"center\"</code>, <code>\"char\"</code>, <code>\"justify\"</code>, <code>\"left\"</code>, <code>\"right\"</code> | — |\n| <code>alignmentBaseline</code> | no | <code>\"inherit\" &#124; \"auto\" &#124; \"baseline\" &#124; \"before-edge\" &#124; \"text-before-edge\" &#124; \"middle\" &#124; \"central\" &#124; \"after-edge\" &#124; \"text-after-edge\" &#124; \"ideographic\" &#124; \"alphabetic\" &#124; \"hanging\" &#124; \"mathematical\"</code> | <code>\"after-edge\"</code>, <code>\"alphabetic\"</code>, <code>\"auto\"</code>, <code>\"baseline\"</code>, <code>\"before-edge\"</code>, <code>\"central\"</code>, <code>\"hanging\"</code>, <code>\"ideographic\"</code>, <code>\"inherit\"</code>, <code>\"mathematical\"</code>, <code>\"middle\"</code>, <code>\"text-after-edge\"</code>, <code>\"text-before-edge\"</code> | — |\n| <code>allowReorder</code> | no | <code>\"yes\" &#124; \"no\"</code> | <code>\"no\"</code>, <code>\"yes\"</code> | — |\n| <code>alphabetic</code> | no | <code>string &#124; number</code> | — | — |\n| <code>alt</code> | no | <code>string</code> | — | — |\n| <code>amplitude</code> | no | <code>string &#124; number</code> | — | — |\n| <code>arabicForm</code> | no | <code>\"initial\" &#124; \"medial\" &#124; \"terminal\" &#124; \"isolated\"</code> | <code>\"initial\"</code>, <code>\"isolated\"</code>, <code>\"medial\"</code>, <code>\"terminal\"</code> | — |\n| <code>aria-activedescendant</code> | no | <code>string</code> | — | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |\n| <code>aria-atomic</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |\n| <code>aria-autocomplete</code> | no | <code>\"none\" &#124; \"inline\" &#124; \"list\" &#124; \"both\"</code> | <code>\"both\"</code>, <code>\"inline\"</code>, <code>\"list\"</code>, <code>\"none\"</code> | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. |\n| <code>aria-braillelabel</code> | no | <code>string</code> | — | Defines a string value that labels the current element, which is intended to be converted into Braille. |\n| <code>aria-brailleroledescription</code> | no | <code>string</code> | — | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. |\n| <code>aria-busy</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | — |\n| <code>aria-checked</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\" &#124; \"mixed\"</code> | <code>false</code>, <code>\"false\"</code>, <code>\"mixed\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets. |\n| <code>aria-colcount</code> | no | <code>number</code> | — | Defines the total number of columns in a table, grid, or treegrid. |\n| <code>aria-colindex</code> | no | <code>number</code> | — | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. |\n| <code>aria-colindextext</code> | no | <code>string</code> | — | Defines a human readable text alternative of aria-colindex. |\n| <code>aria-colspan</code> | no | <code>number</code> | — | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |\n| <code>aria-controls</code> | no | <code>string</code> | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |\n| <code>aria-current</code> | no | <code>false &#124; true &#124; \"time\" &#124; \"true\" &#124; \"false\" &#124; \"page\" &#124; \"step\" &#124; \"location\" &#124; \"date\"</code> | <code>\"date\"</code>, <code>false</code>, <code>\"false\"</code>, <code>\"location\"</code>, <code>\"page\"</code>, <code>\"step\"</code>, <code>\"time\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates the element that represents the current item within a container or set of related elements. |\n| <code>aria-describedby</code> | no | <code>string</code> | — | Identifies the element (or elements) that describes the object. |\n| <code>aria-description</code> | no | <code>string</code> | — | Defines a string value that describes or annotates the current element. |\n| <code>aria-details</code> | no | <code>string</code> | — | Identifies the element that provides a detailed, extended description for the object. |\n| <code>aria-disabled</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |\n| <code>aria-dropeffect</code> | no | <code>\"link\" &#124; \"none\" &#124; \"copy\" &#124; \"execute\" &#124; \"move\" &#124; \"popup\"</code> | <code>\"copy\"</code>, <code>\"execute\"</code>, <code>\"link\"</code>, <code>\"move\"</code>, <code>\"none\"</code>, <code>\"popup\"</code> | Indicates what functions can be performed when a dragged object is released on the drop target. |\n| <code>aria-errormessage</code> | no | <code>string</code> | — | Identifies the element that provides an error message for the object. |\n| <code>aria-expanded</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |\n| <code>aria-flowto</code> | no | <code>string</code> | — | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. |\n| <code>aria-grabbed</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates an element's \"grabbed\" state in a drag-and-drop operation. |\n| <code>aria-haspopup</code> | no | <code>false &#124; true &#124; \"dialog\" &#124; \"menu\" &#124; \"grid\" &#124; \"true\" &#124; \"false\" &#124; \"listbox\" &#124; \"tree\"</code> | <code>\"dialog\"</code>, <code>false</code>, <code>\"false\"</code>, <code>\"grid\"</code>, <code>\"listbox\"</code>, <code>\"menu\"</code>, <code>\"tree\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |\n| <code>aria-hidden</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates whether the element is exposed to an accessibility API. |\n| <code>aria-invalid</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\" &#124; \"grammar\" &#124; \"spelling\"</code> | <code>false</code>, <code>\"false\"</code>, <code>\"grammar\"</code>, <code>\"spelling\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates the entered value does not conform to the format expected by the application. |\n| <code>aria-keyshortcuts</code> | no | <code>string</code> | — | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |\n| <code>aria-label</code> | no | <code>string</code> | — | Defines a string value that labels the current element. |\n| <code>aria-labelledby</code> | no | <code>string</code> | — | Identifies the element (or elements) that labels the current element. |\n| <code>aria-level</code> | no | <code>number</code> | — | Defines the hierarchical level of an element within a structure. |\n| <code>aria-live</code> | no | <code>\"off\" &#124; \"assertive\" &#124; \"polite\"</code> | <code>\"assertive\"</code>, <code>\"off\"</code>, <code>\"polite\"</code> | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |\n| <code>aria-modal</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates whether an element is modal when displayed. |\n| <code>aria-multiline</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates whether a text box accepts multiple lines of input or only a single line. |\n| <code>aria-multiselectable</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates that the user may select more than one item from the current selectable descendants. |\n| <code>aria-orientation</code> | no | <code>\"horizontal\" &#124; \"vertical\"</code> | <code>\"horizontal\"</code>, <code>\"vertical\"</code> | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |\n| <code>aria-owns</code> | no | <code>string</code> | — | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |\n| <code>aria-placeholder</code> | no | <code>string</code> | — | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. |\n| <code>aria-posinset</code> | no | <code>number</code> | — | Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. |\n| <code>aria-pressed</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\" &#124; \"mixed\"</code> | <code>false</code>, <code>\"false\"</code>, <code>\"mixed\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates the current \"pressed\" state of toggle buttons. |\n| <code>aria-readonly</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates that the element is not editable, but is otherwise operable. |\n| <code>aria-relevant</code> | no | <code>\"text\" &#124; \"additions\" &#124; \"additions removals\" &#124; \"additions text\" &#124; \"all\" &#124; \"removals\" &#124; \"removals additions\" &#124; \"removals text\" &#124; \"text additions\" &#124; \"text removals\"</code> | <code>\"additions\"</code>, <code>\"additions removals\"</code>, <code>\"additions text\"</code>, <code>\"all\"</code>, <code>\"removals\"</code>, <code>\"removals additions\"</code>, <code>\"removals text\"</code>, <code>\"text\"</code>, <code>\"text additions\"</code>, <code>\"text removals\"</code> | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. |\n| <code>aria-required</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates that user input is required on the element before a form may be submitted. |\n| <code>aria-roledescription</code> | no | <code>string</code> | — | Defines a human-readable, author-localized description for the role of an element. |\n| <code>aria-rowcount</code> | no | <code>number</code> | — | Defines the total number of rows in a table, grid, or treegrid. |\n| <code>aria-rowindex</code> | no | <code>number</code> | — | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. |\n| <code>aria-rowindextext</code> | no | <code>string</code> | — | Defines a human readable text alternative of aria-rowindex. |\n| <code>aria-rowspan</code> | no | <code>number</code> | — | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. |\n| <code>aria-selected</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | Indicates the current \"selected\" state of various widgets. |\n| <code>aria-setsize</code> | no | <code>number</code> | — | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. |\n| <code>aria-sort</code> | no | <code>\"none\" &#124; \"ascending\" &#124; \"descending\" &#124; \"other\"</code> | <code>\"ascending\"</code>, <code>\"descending\"</code>, <code>\"none\"</code>, <code>\"other\"</code> | Indicates if items in a table or grid are sorted in ascending or descending order. |\n| <code>aria-valuemax</code> | no | <code>number</code> | — | Defines the maximum allowed value for a range widget. |\n| <code>aria-valuemin</code> | no | <code>number</code> | — | Defines the minimum allowed value for a range widget. |\n| <code>aria-valuenow</code> | no | <code>number</code> | — | Defines the current value for a range widget. |\n| <code>aria-valuetext</code> | no | <code>string</code> | — | Defines the human readable text alternative of aria-valuenow for a range widget. |\n| <code>ascent</code> | no | <code>string &#124; number</code> | — | — |\n| <code>attributeName</code> | no | <code>string</code> | — | — |\n| <code>attributeType</code> | no | <code>string</code> | — | — |\n| <code>autoCapitalize</code> | no | <code>(string &amp; {}) &#124; \"none\" &#124; \"off\" &#124; \"on\" &#124; \"sentences\" &#124; \"words\" &#124; \"characters\"</code> | <code>\"characters\"</code>, <code>\"none\"</code>, <code>\"off\"</code>, <code>\"on\"</code>, <code>\"sentences\"</code>, <code>\"words\"</code> | — |\n| <code>autoComplete</code> | no | <code>HTMLInputAutoCompleteAttribute</code> | — | — |\n| <code>autoCorrect</code> | no | <code>string</code> | — | — |\n| <code>autoReverse</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | — |\n| <code>autoSave</code> | no | <code>string</code> | — | — |\n| <code>azimuth</code> | no | <code>string &#124; number</code> | — | — |\n| <code>baseFrequency</code> | no | <code>string &#124; number</code> | — | — |\n| <code>baseProfile</code> | no | <code>string &#124; number</code> | — | — |\n| <code>baselineShift</code> | no | <code>string &#124; number</code> | — | — |\n| <code>bbox</code> | no | <code>string &#124; number</code> | — | — |\n| <code>bd</code> | no | <code>StyleProp&lt;Property.Border&lt;string &#124; number&gt;&gt;</code> | — | Border |\n| <code>bdrs</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | BorderRadius, theme key: theme.radius |\n| <code>begin</code> | no | <code>string &#124; number</code> | — | — |\n| <code>bg</code> | no | <code>StyleProp&lt;DefaultMantineColor&gt;</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Background, theme key: theme.colors |\n| <code>bga</code> | no | <code>StyleProp&lt;Property.BackgroundAttachment&gt;</code> | <code>\"-moz-initial\"</code>, <code>\"fixed\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"local\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"scroll\"</code>, <code>\"unset\"</code> | BackgroundAttachment |\n| <code>bgcolor</code> | no | <code>string</code> | — | — |\n| <code>bgp</code> | no | <code>StyleProp&lt;Property.BackgroundPosition&lt;string &#124; number&gt;&gt;</code> | — | BackgroundPosition |\n| <code>bgr</code> | no | <code>StyleProp&lt;Property.BackgroundRepeat&gt;</code> | <code>\"-moz-initial\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"no-repeat\"</code>, <code>\"repeat\"</code>, <code>\"repeat-x\"</code>, <code>\"repeat-y\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"round\"</code>, <code>\"space\"</code>, <code>\"unset\"</code> | BackgroundRepeat |\n| <code>bgsz</code> | no | <code>StyleProp&lt;Property.BackgroundSize&lt;string &#124; number&gt;&gt;</code> | — | BackgroundSize |\n| <code>bias</code> | no | <code>string &#124; number</code> | — | — |\n| <code>border</code> | no | <code>number</code> | — | — |\n| <code>by</code> | no | <code>string &#124; number</code> | — | — |\n| <code>c</code> | no | <code>StyleProp&lt;DefaultMantineColor&gt;</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color |\n| <code>calcMode</code> | no | <code>string &#124; number</code> | — | — |\n| <code>capHeight</code> | no | <code>string &#124; number</code> | — | — |\n| <code>capture</code> | no | <code>false &#124; true &#124; \"user\" &#124; \"environment\"</code> | <code>\"environment\"</code>, <code>false</code>, <code>true</code>, <code>\"user\"</code> | — |\n| <code>cellPadding</code> | no | <code>string &#124; number</code> | — | — |\n| <code>cellSpacing</code> | no | <code>string &#124; number</code> | — | — |\n| <code>checked</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>clip</code> | no | <code>string &#124; number</code> | — | — |\n| <code>clipPath</code> | no | <code>string</code> | — | — |\n| <code>clipPathUnits</code> | no | <code>string &#124; number</code> | — | — |\n| <code>clipRule</code> | no | <code>string &#124; number</code> | — | — |\n| <code>colSpan</code> | no | <code>number</code> | — | — |\n| <code>color</code> | no | <code>string</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"initials\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of `theme.colors` or any valid CSS color |\n| <code>colorInterpolation</code> | no | <code>string &#124; number</code> | — | — |\n| <code>colorInterpolationFilters</code> | no | <code>\"inherit\" &#124; \"auto\" &#124; \"sRGB\" &#124; \"linearRGB\"</code> | <code>\"auto\"</code>, <code>\"inherit\"</code>, <code>\"linearRGB\"</code>, <code>\"sRGB\"</code> | — |\n| <code>colorProfile</code> | no | <code>string &#124; number</code> | — | — |\n| <code>colorRendering</code> | no | <code>string &#124; number</code> | — | — |\n| <code>cols</code> | no | <code>number</code> | — | — |\n| <code>content</code> | no | <code>string</code> | — | — |\n| <code>contentScriptType</code> | no | <code>string &#124; number</code> | — | — |\n| <code>contentStyleType</code> | no | <code>string &#124; number</code> | — | — |\n| <code>contextMenu</code> | no | <code>string</code> | — | — |\n| <code>crossOrigin</code> | no | <code>\"\" &#124; \"anonymous\" &#124; \"use-credentials\"</code> | <code>\"\"</code>, <code>\"anonymous\"</code>, <code>\"use-credentials\"</code> | — |\n| <code>cursor</code> | no | <code>string &#124; number</code> | — | — |\n| <code>cx</code> | no | <code>string &#124; number</code> | — | — |\n| <code>cy</code> | no | <code>string &#124; number</code> | — | — |\n| <code>d</code> | no | <code>string</code> | — | — |\n| <code>darkHidden</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether component should be hidden in dark color scheme with `display: none` |\n| <code>datatype</code> | no | <code>string</code> | — | — |\n| <code>decelerate</code> | no | <code>string &#124; number</code> | — | — |\n| <code>defaultChecked</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>defaultValue</code> | no | <code>string &#124; number &#124; readonly string[]</code> | — | — |\n| <code>descent</code> | no | <code>string &#124; number</code> | — | — |\n| <code>diffuseConstant</code> | no | <code>string &#124; number</code> | — | — |\n| <code>dir</code> | no | <code>string</code> | — | — |\n| <code>dirName</code> | no | <code>string</code> | — | — |\n| <code>direction</code> | no | <code>string &#124; number</code> | — | — |\n| <code>disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>display</code> | no | <code>StyleProp&lt;Property.Display&gt;</code> | <code>\"-moz-initial\"</code>, <code>\"-ms-flexbox\"</code>, <code>\"-ms-grid\"</code>, <code>\"-ms-inline-flexbox\"</code>, <code>\"-ms-inline-grid\"</code>, <code>\"-webkit-flex\"</code>, <code>\"-webkit-inline-flex\"</code>, <code>\"block\"</code>, <code>\"contents\"</code>, <code>\"flex\"</code>, <code>\"flow\"</code>, <code>\"flow-root\"</code>, <code>\"grid\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"inline\"</code>, <code>\"inline-block\"</code>, <code>\"inline-flex\"</code>, <code>\"inline-grid\"</code>, <code>\"inline-list-item\"</code>, <code>\"inline-table\"</code>, <code>\"list-item\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"ruby\"</code>, <code>\"ruby-base\"</code>, <code>\"ruby-base-container\"</code>, <code>\"ruby-text\"</code>, <code>\"ruby-text-container\"</code>, <code>\"run-in\"</code>, <code>\"table\"</code>, <code>\"table-caption\"</code>, <code>\"table-cell\"</code>, <code>\"table-column\"</code>, <code>\"table-column-group\"</code>, <code>\"table-footer-group\"</code>, <code>\"table-header-group\"</code>, <code>\"table-row\"</code>, <code>\"table-row-group\"</code>, <code>\"unset\"</code> | — |\n| <code>divisor</code> | no | <code>string &#124; number</code> | — | — |\n| <code>dominantBaseline</code> | no | <code>\"inherit\" &#124; \"auto\" &#124; \"text-before-edge\" &#124; \"middle\" &#124; \"central\" &#124; \"text-after-edge\" &#124; \"ideographic\" &#124; \"alphabetic\" &#124; \"hanging\" &#124; \"mathematical\" &#124; \"use-script\" &#124; \"no-change\" &#124; \"reset-size\"</code> | <code>\"alphabetic\"</code>, <code>\"auto\"</code>, <code>\"central\"</code>, <code>\"hanging\"</code>, <code>\"ideographic\"</code>, <code>\"inherit\"</code>, <code>\"mathematical\"</code>, <code>\"middle\"</code>, <code>\"no-change\"</code>, <code>\"reset-size\"</code>, <code>\"text-after-edge\"</code>, <code>\"text-before-edge\"</code>, <code>\"use-script\"</code> | — |\n| <code>draggable</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | — |\n| <code>dur</code> | no | <code>string &#124; number</code> | — | — |\n| <code>dx</code> | no | <code>string &#124; number</code> | — | — |\n| <code>dy</code> | no | <code>string &#124; number</code> | — | — |\n| <code>edgeMode</code> | no | <code>string &#124; number</code> | — | — |\n| <code>elevation</code> | no | <code>string &#124; number</code> | — | — |\n| <code>enableBackground</code> | no | <code>string &#124; number</code> | — | — |\n| <code>end</code> | no | <code>string &#124; number</code> | — | — |\n| <code>enterKeyHint</code> | no | <code>\"search\" &#124; \"enter\" &#124; \"done\" &#124; \"go\" &#124; \"next\" &#124; \"previous\" &#124; \"send\"</code> | <code>\"done\"</code>, <code>\"enter\"</code>, <code>\"go\"</code>, <code>\"next\"</code>, <code>\"previous\"</code>, <code>\"search\"</code>, <code>\"send\"</code> | — |\n| <code>exponent</code> | no | <code>string &#124; number</code> | — | — |\n| <code>exportparts</code> | no | <code>string</code> | — | — |\n| <code>externalResourcesRequired</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | — |\n| <code>ff</code> | no | <code>StyleProp&lt;\"text\" &#124; (string &amp; {}) &#124; \"monospace\" &#124; \"heading\"&gt;</code> | <code>\"heading\"</code>, <code>\"monospace\"</code>, <code>\"text\"</code> | FontFamily |\n| <code>fill</code> | no | <code>string</code> | — | — |\n| <code>fillOpacity</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fillRule</code> | no | <code>\"inherit\" &#124; \"nonzero\" &#124; \"evenodd\"</code> | <code>\"evenodd\"</code>, <code>\"inherit\"</code>, <code>\"nonzero\"</code> | — |\n| <code>filter</code> | no | <code>string</code> | — | — |\n| <code>filterRes</code> | no | <code>string &#124; number</code> | — | — |\n| <code>filterUnits</code> | no | <code>string &#124; number</code> | — | — |\n| <code>flex</code> | no | <code>StyleProp&lt;Property.Flex&lt;string &#124; number&gt;&gt;</code> | — | — |\n| <code>floodColor</code> | no | <code>string &#124; number</code> | — | — |\n| <code>floodOpacity</code> | no | <code>string &#124; number</code> | — | — |\n| <code>focusable</code> | no | <code>false &#124; true &#124; \"auto\" &#124; \"true\" &#124; \"false\"</code> | <code>\"auto\"</code>, <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | — |\n| <code>fontFamily</code> | no | <code>string</code> | — | — |\n| <code>fontSize</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fontSizeAdjust</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fontStretch</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fontStyle</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fontVariant</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fontWeight</code> | no | <code>string &#124; number</code> | — | — |\n| <code>format</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fr</code> | no | <code>string &#124; number</code> | — | — |\n| <code>frame</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>from</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fs</code> | no | <code>StyleProp&lt;Property.FontStyle&gt;</code> | <code>\"-moz-initial\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"italic\"</code>, <code>\"normal\"</code>, <code>\"oblique\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code> | FontStyle |\n| <code>fw</code> | no | <code>StyleProp&lt;Property.FontWeight&gt;</code> | <code>\"-moz-initial\"</code>, <code>\"bold\"</code>, <code>\"bolder\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"lighter\"</code>, <code>\"normal\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code> | FontWeight |\n| <code>fx</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fy</code> | no | <code>string &#124; number</code> | — | — |\n| <code>fz</code> | no | <code>StyleProp&lt;number &#124; \"h1\" &#124; \"h2\" &#124; \"h3\" &#124; \"h4\" &#124; \"h5\" &#124; \"h6\" &#124; MantineFontSize&gt;</code> | <code>\"h1\"</code>, <code>\"h2\"</code>, <code>\"h3\"</code>, <code>\"h4\"</code>, <code>\"h5\"</code>, <code>\"h6\"</code>, <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | FontSize, theme key: theme.fontSizes |\n| <code>g1</code> | no | <code>string &#124; number</code> | — | — |\n| <code>g2</code> | no | <code>string &#124; number</code> | — | — |\n| <code>glyphName</code> | no | <code>string &#124; number</code> | — | — |\n| <code>glyphOrientationHorizontal</code> | no | <code>string &#124; number</code> | — | — |\n| <code>glyphOrientationVertical</code> | no | <code>string &#124; number</code> | — | — |\n| <code>gradientTransform</code> | no | <code>string</code> | — | — |\n| <code>gradientUnits</code> | no | <code>string</code> | — | — |\n| <code>h</code> | no | <code>StyleProp&lt;Property.Height&lt;string &#124; number&gt;&gt;</code> | — | Height, theme key: theme.spacing |\n| <code>hanging</code> | no | <code>string &#124; number</code> | — | — |\n| <code>headers</code> | no | <code>string</code> | — | — |\n| <code>height</code> | no | <code>string &#124; number</code> | — | — |\n| <code>hidden</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>hiddenFrom</code> | no | <code>MantineBreakpoint</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Breakpoint above which the component is hidden with `display: none` |\n| <code>horizAdvX</code> | no | <code>string &#124; number</code> | — | — |\n| <code>horizOriginX</code> | no | <code>string &#124; number</code> | — | — |\n| <code>href</code> | no | <code>string</code> | — | — |\n| <code>id</code> | no | <code>string</code> | — | Static id used as base to generate `aria-` attributes, by default generates random id |\n| <code>ideographic</code> | no | <code>string &#124; number</code> | — | — |\n| <code>imageRendering</code> | no | <code>string &#124; number</code> | — | — |\n| <code>in</code> | no | <code>string</code> | — | — |\n| <code>in2</code> | no | <code>string &#124; number</code> | — | — |\n| <code>inert</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>inlist</code> | no | <code>unknown</code> | — | — |\n| <code>inputMode</code> | no | <code>\"search\" &#124; \"text\" &#124; \"none\" &#124; \"tel\" &#124; \"url\" &#124; \"email\" &#124; \"numeric\" &#124; \"decimal\"</code> | <code>\"decimal\"</code>, <code>\"email\"</code>, <code>\"none\"</code>, <code>\"numeric\"</code>, <code>\"search\"</code>, <code>\"tel\"</code>, <code>\"text\"</code>, <code>\"url\"</code> | Hints at the type of data that might be entered by the user while editing the element or its contents |\n| <code>intercept</code> | no | <code>string &#124; number</code> | — | — |\n| <code>is</code> | no | <code>string</code> | — | Specify that a standard HTML element should behave like a defined custom built-in element |\n| <code>itemID</code> | no | <code>string</code> | — | — |\n| <code>itemProp</code> | no | <code>string</code> | — | — |\n| <code>itemScope</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>itemType</code> | no | <code>string</code> | — | — |\n| <code>k</code> | no | <code>string &#124; number</code> | — | — |\n| <code>k1</code> | no | <code>string &#124; number</code> | — | — |\n| <code>k2</code> | no | <code>string &#124; number</code> | — | — |\n| <code>k3</code> | no | <code>string &#124; number</code> | — | — |\n| <code>k4</code> | no | <code>string &#124; number</code> | — | — |\n| <code>kernelMatrix</code> | no | <code>string &#124; number</code> | — | — |\n| <code>kernelUnitLength</code> | no | <code>string &#124; number</code> | — | — |\n| <code>kerning</code> | no | <code>string &#124; number</code> | — | — |\n| <code>key</code> | no | <code>Key &#124; null</code> | — | Stable identity used by React when rendering collections. |\n| <code>keyPoints</code> | no | <code>string &#124; number</code> | — | — |\n| <code>keySplines</code> | no | <code>string &#124; number</code> | — | — |\n| <code>keyTimes</code> | no | <code>string &#124; number</code> | — | — |\n| <code>lang</code> | no | <code>string</code> | — | — |\n| <code>lengthAdjust</code> | no | <code>string &#124; number</code> | — | — |\n| <code>letterSpacing</code> | no | <code>string &#124; number</code> | — | — |\n| <code>lh</code> | no | <code>StyleProp&lt;number &#124; \"h1\" &#124; \"h2\" &#124; \"h3\" &#124; \"h4\" &#124; \"h5\" &#124; \"h6\" &#124; MantineLineHeight&gt;</code> | <code>\"h1\"</code>, <code>\"h2\"</code>, <code>\"h3\"</code>, <code>\"h4\"</code>, <code>\"h5\"</code>, <code>\"h6\"</code>, <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | LineHeight, theme key: lineHeights |\n| <code>lightHidden</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether component should be hidden in light color scheme with `display: none` |\n| <code>lightingColor</code> | no | <code>string &#124; number</code> | — | — |\n| <code>limitingConeAngle</code> | no | <code>string &#124; number</code> | — | — |\n| <code>list</code> | no | <code>string</code> | — | — |\n| <code>local</code> | no | <code>string &#124; number</code> | — | — |\n| <code>lts</code> | no | <code>StyleProp&lt;Property.LetterSpacing&lt;string &#124; number&gt;&gt;</code> | — | LetterSpacing |\n| <code>m</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Margin, theme key: theme.spacing |\n| <code>mah</code> | no | <code>StyleProp&lt;Property.MaxHeight&lt;string &#124; number&gt;&gt;</code> | — | MaxHeight, theme key: theme.spacing |\n| <code>markerEnd</code> | no | <code>string</code> | — | — |\n| <code>markerHeight</code> | no | <code>string &#124; number</code> | — | — |\n| <code>markerMid</code> | no | <code>string</code> | — | — |\n| <code>markerStart</code> | no | <code>string</code> | — | — |\n| <code>markerUnits</code> | no | <code>string &#124; number</code> | — | — |\n| <code>markerWidth</code> | no | <code>string &#124; number</code> | — | — |\n| <code>mask</code> | no | <code>string</code> | — | — |\n| <code>maskContentUnits</code> | no | <code>string &#124; number</code> | — | — |\n| <code>maskUnits</code> | no | <code>string &#124; number</code> | — | — |\n| <code>mathematical</code> | no | <code>string &#124; number</code> | — | — |\n| <code>maw</code> | no | <code>StyleProp&lt;Property.MaxWidth&lt;string &#124; number&gt;&gt;</code> | — | MaxWidth, theme key: theme.spacing |\n| <code>max</code> | no | <code>string &#124; number</code> | — | — |\n| <code>maxLength</code> | no | <code>number</code> | — | — |\n| <code>mb</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginBottom, theme key: theme.spacing |\n| <code>me</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginInlineEnd, theme key: theme.spacing |\n| <code>media</code> | no | <code>string</code> | — | — |\n| <code>method</code> | no | <code>string</code> | — | — |\n| <code>mie</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginInlineEnd, theme key: theme.spacing |\n| <code>mih</code> | no | <code>StyleProp&lt;Property.MinHeight&lt;string &#124; number&gt;&gt;</code> | — | MinHeight, theme key: theme.spacing |\n| <code>min</code> | no | <code>string &#124; number</code> | — | — |\n| <code>minLength</code> | no | <code>number</code> | — | — |\n| <code>mis</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginInlineStart, theme key: theme.spacing |\n| <code>miw</code> | no | <code>StyleProp&lt;Property.MinWidth&lt;string &#124; number&gt;&gt;</code> | — | MinWidth, theme key: theme.spacing |\n| <code>ml</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginLeft, theme key: theme.spacing |\n| <code>mod</code> | no | <code>BoxMod</code> | — | Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed |\n| <code>mode</code> | no | <code>string &#124; number</code> | — | — |\n| <code>mr</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginRight, theme key: theme.spacing |\n| <code>ms</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginInlineStart, theme key: theme.spacing |\n| <code>mt</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginTop, theme key: theme.spacing |\n| <code>multiple</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>mx</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginInline, theme key: theme.spacing |\n| <code>my</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | MarginBlock, theme key: theme.spacing |\n| <code>name</code> | no | <code>string</code> | — | — |\n| <code>nonce</code> | no | <code>string</code> | — | — |\n| <code>numOctaves</code> | no | <code>string &#124; number</code> | — | — |\n| <code>offset</code> | no | <code>string &#124; number</code> | — | — |\n| <code>opacity</code> | no | <code>StyleProp&lt;Property.Opacity&gt;</code> | <code>\"-moz-initial\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code> | — |\n| <code>operator</code> | no | <code>string &#124; number</code> | — | — |\n| <code>order</code> | no | <code>string &#124; number</code> | — | — |\n| <code>orient</code> | no | <code>string &#124; number</code> | — | — |\n| <code>orientation</code> | no | <code>string &#124; number</code> | — | — |\n| <code>origin</code> | no | <code>string &#124; number</code> | — | — |\n| <code>overflow</code> | no | <code>string &#124; number</code> | — | — |\n| <code>overlinePosition</code> | no | <code>string &#124; number</code> | — | — |\n| <code>overlineThickness</code> | no | <code>string &#124; number</code> | — | — |\n| <code>p</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Padding, theme key: theme.spacing |\n| <code>paintOrder</code> | no | <code>string &#124; number</code> | — | — |\n| <code>panose1</code> | no | <code>string &#124; number</code> | — | — |\n| <code>part</code> | no | <code>string</code> | — | — |\n| <code>path</code> | no | <code>string</code> | — | — |\n| <code>pathLength</code> | no | <code>string &#124; number</code> | — | — |\n| <code>pattern</code> | no | <code>string</code> | — | — |\n| <code>patternContentUnits</code> | no | <code>string</code> | — | — |\n| <code>patternTransform</code> | no | <code>string &#124; number</code> | — | — |\n| <code>patternUnits</code> | no | <code>string</code> | — | — |\n| <code>pb</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingBottom, theme key: theme.spacing |\n| <code>pe</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingInlineEnd, theme key: theme.spacing |\n| <code>pie</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingInlineEnd, theme key: theme.spacing |\n| <code>pis</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingInlineStart, theme key: theme.spacing |\n| <code>pl</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingLeft, theme key: theme.spacing |\n| <code>placeholder</code> | no | <code>string</code> | — | — |\n| <code>pointerEvents</code> | no | <code>string &#124; number</code> | — | — |\n| <code>points</code> | no | <code>string</code> | — | — |\n| <code>pointsAtX</code> | no | <code>string &#124; number</code> | — | — |\n| <code>pointsAtY</code> | no | <code>string &#124; number</code> | — | — |\n| <code>pointsAtZ</code> | no | <code>string &#124; number</code> | — | — |\n| <code>pr</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingRight, theme key: theme.spacing |\n| <code>prefix</code> | no | <code>string</code> | — | — |\n| <code>preserveAlpha</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | — |\n| <code>preserveAspectRatio</code> | no | <code>string</code> | — | — |\n| <code>primitiveUnits</code> | no | <code>string &#124; number</code> | — | — |\n| <code>property</code> | no | <code>string</code> | — | — |\n| <code>ps</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingInlineStart, theme key: theme.spacing |\n| <code>pt</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingTop, theme key: theme.spacing |\n| <code>px</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingInline, theme key: theme.spacing |\n| <code>py</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | PaddingBlock, theme key: theme.spacing |\n| <code>r</code> | no | <code>string &#124; number</code> | — | — |\n| <code>radioGroup</code> | no | <code>string</code> | — | — |\n| <code>radius</code> | no | <code>MantineRadius</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem |\n| <code>readOnly</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>rel</code> | no | <code>string</code> | — | — |\n| <code>renderingIntent</code> | no | <code>string &#124; number</code> | — | — |\n| <code>repeatCount</code> | no | <code>string &#124; number</code> | — | — |\n| <code>repeatDur</code> | no | <code>string &#124; number</code> | — | — |\n| <code>required</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>requiredExtensions</code> | no | <code>string &#124; number</code> | — | — |\n| <code>requiredFeatures</code> | no | <code>string &#124; number</code> | — | — |\n| <code>resource</code> | no | <code>string</code> | — | — |\n| <code>restart</code> | no | <code>string &#124; number</code> | — | — |\n| <code>result</code> | no | <code>string</code> | — | — |\n| <code>results</code> | no | <code>number</code> | — | — |\n| <code>rev</code> | no | <code>string</code> | — | — |\n| <code>role</code> | no | <code>AriaRole</code> | — | — |\n| <code>rotate</code> | no | <code>string &#124; number</code> | — | — |\n| <code>rowSpan</code> | no | <code>number</code> | — | — |\n| <code>rows</code> | no | <code>number</code> | — | — |\n| <code>rules</code> | no | <code>\"none\" &#124; \"all\" &#124; \"rows\" &#124; \"groups\" &#124; \"columns\"</code> | <code>\"all\"</code>, <code>\"columns\"</code>, <code>\"groups\"</code>, <code>\"none\"</code>, <code>\"rows\"</code> | — |\n| <code>rx</code> | no | <code>string &#124; number</code> | — | — |\n| <code>ry</code> | no | <code>string &#124; number</code> | — | — |\n| <code>scale</code> | no | <code>string &#124; number</code> | — | — |\n| <code>scope</code> | no | <code>string</code> | — | — |\n| <code>security</code> | no | <code>string</code> | — | — |\n| <code>seed</code> | no | <code>string &#124; number</code> | — | — |\n| <code>shadow</code> | no | <code>MantineShadow</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.shadows` or any other valid CSS `box-shadow` value |\n| <code>shapeRendering</code> | no | <code>string &#124; number</code> | — | — |\n| <code>size</code> | no | <code>\"xs\" &#124; \"sm\" &#124; \"md\" &#124; \"lg\" &#124; \"xl\"</code> | <code>\"compact-lg\"</code>, <code>\"compact-md\"</code>, <code>\"compact-sm\"</code>, <code>\"compact-xl\"</code>, <code>\"compact-xs\"</code>, <code>\"input-lg\"</code>, <code>\"input-md\"</code>, <code>\"input-sm\"</code>, <code>\"input-xl\"</code>, <code>\"input-xs\"</code>, <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Component size |\n| <code>slope</code> | no | <code>string &#124; number</code> | — | — |\n| <code>slot</code> | no | <code>string</code> | — | — |\n| <code>spacing</code> | no | <code>string &#124; number</code> | — | — |\n| <code>specularConstant</code> | no | <code>string &#124; number</code> | — | — |\n| <code>specularExponent</code> | no | <code>string &#124; number</code> | — | — |\n| <code>speed</code> | no | <code>string &#124; number</code> | — | — |\n| <code>spellCheck</code> | no | <code>false &#124; true &#124; \"true\" &#124; \"false\"</code> | <code>false</code>, <code>\"false\"</code>, <code>true</code>, <code>\"true\"</code> | — |\n| <code>spreadMethod</code> | no | <code>string</code> | — | — |\n| <code>src</code> | no | <code>string</code> | — | — |\n| <code>startOffset</code> | no | <code>string &#124; number</code> | — | — |\n| <code>stdDeviation</code> | no | <code>string &#124; number</code> | — | — |\n| <code>stemh</code> | no | <code>string &#124; number</code> | — | — |\n| <code>stemv</code> | no | <code>string &#124; number</code> | — | — |\n| <code>step</code> | no | <code>string &#124; number</code> | — | — |\n| <code>stitchTiles</code> | no | <code>string &#124; number</code> | — | — |\n| <code>stopColor</code> | no | <code>string</code> | — | — |\n| <code>stopOpacity</code> | no | <code>string &#124; number</code> | — | — |\n| <code>strikethroughPosition</code> | no | <code>string &#124; number</code> | — | — |\n| <code>strikethroughThickness</code> | no | <code>string &#124; number</code> | — | — |\n| <code>string</code> | no | <code>string &#124; number</code> | — | — |\n| <code>stroke</code> | no | <code>string</code> | — | — |\n| <code>strokeDasharray</code> | no | <code>string &#124; number</code> | — | — |\n| <code>strokeDashoffset</code> | no | <code>string &#124; number</code> | — | — |\n| <code>strokeLinecap</code> | no | <code>\"inherit\" &#124; \"round\" &#124; \"butt\" &#124; \"square\"</code> | <code>\"butt\"</code>, <code>\"inherit\"</code>, <code>\"round\"</code>, <code>\"square\"</code> | — |\n| <code>strokeLinejoin</code> | no | <code>\"inherit\" &#124; \"round\" &#124; \"miter\" &#124; \"bevel\"</code> | <code>\"bevel\"</code>, <code>\"inherit\"</code>, <code>\"miter\"</code>, <code>\"round\"</code> | — |\n| <code>strokeMiterlimit</code> | no | <code>string &#124; number</code> | — | — |\n| <code>strokeOpacity</code> | no | <code>string &#124; number</code> | — | — |\n| <code>strokeWidth</code> | no | <code>string &#124; number</code> | — | — |\n| <code>style</code> | no | <code>CSSProperties</code> | — | Style to apply to the root element, used for virtualizer positioning |\n| <code>styles</code> | no | <code>Partial&lt;Record&lt;\"label\", CSSProperties&gt;&gt;</code> | — | — |\n| <code>summary</code> | no | <code>string</code> | — | — |\n| <code>surfaceScale</code> | no | <code>string &#124; number</code> | — | — |\n| <code>systemLanguage</code> | no | <code>string &#124; number</code> | — | — |\n| <code>ta</code> | no | <code>StyleProp&lt;Property.TextAlign&gt;</code> | <code>\"-khtml-center\"</code>, <code>\"-khtml-left\"</code>, <code>\"-khtml-right\"</code>, <code>\"-moz-center\"</code>, <code>\"-moz-initial\"</code>, <code>\"-moz-left\"</code>, <code>\"-moz-right\"</code>, <code>\"-webkit-center\"</code>, <code>\"-webkit-left\"</code>, <code>\"-webkit-match-parent\"</code>, <code>\"-webkit-right\"</code>, <code>\"center\"</code>, <code>\"end\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"justify\"</code>, <code>\"left\"</code>, <code>\"match-parent\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"right\"</code>, <code>\"start\"</code>, <code>\"unset\"</code> | TextAlign |\n| <code>tabIndex</code> | no | <code>number</code> | — | Tab index for the node |\n| <code>tableValues</code> | no | <code>string &#124; number</code> | — | — |\n| <code>target</code> | no | <code>string</code> | — | — |\n| <code>targetX</code> | no | <code>string &#124; number</code> | — | — |\n| <code>targetY</code> | no | <code>string &#124; number</code> | — | — |\n| <code>td</code> | no | <code>StyleProp&lt;Property.TextDecoration&lt;string &#124; number&gt;&gt;</code> | — | TextDecoration |\n| <code>textAnchor</code> | no | <code>\"inherit\" &#124; \"end\" &#124; \"start\" &#124; \"middle\"</code> | <code>\"end\"</code>, <code>\"inherit\"</code>, <code>\"middle\"</code>, <code>\"start\"</code> | — |\n| <code>textDecoration</code> | no | <code>string &#124; number</code> | — | — |\n| <code>textLength</code> | no | <code>string &#124; number</code> | — | — |\n| <code>textRendering</code> | no | <code>string &#124; number</code> | — | — |\n| <code>title</code> | no | <code>string</code> | — | Item title, displayed next to the bullet |\n| <code>to</code> | no | <code>string &#124; number</code> | — | — |\n| <code>transform</code> | no | <code>string</code> | — | — |\n| <code>translate</code> | no | <code>\"yes\" &#124; \"no\"</code> | <code>\"no\"</code>, <code>\"yes\"</code> | — |\n| <code>tt</code> | no | <code>StyleProp&lt;Property.TextTransform&gt;</code> | <code>\"-moz-initial\"</code>, <code>\"capitalize\"</code>, <code>\"full-size-kana\"</code>, <code>\"full-width\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"lowercase\"</code>, <code>\"math-auto\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code>, <code>\"uppercase\"</code> | TextTransform |\n| <code>type</code> | no | <code>\"button\" &#124; \"submit\" &#124; \"reset\"</code> | <code>\"button\"</code>, <code>\"checkbox\"</code>, <code>\"color\"</code>, <code>\"date\"</code>, <code>\"datetime-local\"</code>, <code>\"email\"</code>, <code>\"file\"</code>, <code>\"hidden\"</code>, <code>\"image\"</code>, <code>\"month\"</code>, <code>\"number\"</code>, <code>\"password\"</code>, <code>\"radio\"</code>, <code>\"range\"</code>, <code>\"reset\"</code>, <code>\"search\"</code>, <code>\"submit\"</code>, <code>\"tel\"</code>, <code>\"text\"</code>, <code>\"time\"</code>, <code>\"url\"</code>, <code>\"week\"</code> | — |\n| <code>typeof</code> | no | <code>string</code> | — | — |\n| <code>u1</code> | no | <code>string &#124; number</code> | — | — |\n| <code>u2</code> | no | <code>string &#124; number</code> | — | — |\n| <code>underlinePosition</code> | no | <code>string &#124; number</code> | — | — |\n| <code>underlineThickness</code> | no | <code>string &#124; number</code> | — | — |\n| <code>unicode</code> | no | <code>string &#124; number</code> | — | — |\n| <code>unicodeBidi</code> | no | <code>string &#124; number</code> | — | — |\n| <code>unicodeRange</code> | no | <code>string &#124; number</code> | — | — |\n| <code>unitsPerEm</code> | no | <code>string &#124; number</code> | — | — |\n| <code>unselectable</code> | no | <code>\"off\" &#124; \"on\"</code> | <code>\"off\"</code>, <code>\"on\"</code> | — |\n| <code>vAlphabetic</code> | no | <code>string &#124; number</code> | — | — |\n| <code>vHanging</code> | no | <code>string &#124; number</code> | — | — |\n| <code>vIdeographic</code> | no | <code>string &#124; number</code> | — | — |\n| <code>vMathematical</code> | no | <code>string &#124; number</code> | — | — |\n| <code>valign</code> | no | <code>\"bottom\" &#124; \"top\" &#124; \"baseline\" &#124; \"middle\"</code> | <code>\"baseline\"</code>, <code>\"bottom\"</code>, <code>\"middle\"</code>, <code>\"top\"</code> | — |\n| <code>value</code> | no | <code>string &#124; number &#124; readonly string[]</code> | — | — |\n| <code>values</code> | no | <code>string</code> | — | — |\n| <code>variant</code> | no | <code>string</code> | <code>\"contained\"</code>, <code>\"contrast\"</code>, <code>\"dashed\"</code>, <code>\"default\"</code>, <code>\"dot\"</code>, <code>\"dotted\"</code>, <code>\"filled\"</code>, <code>\"gradient\"</code>, <code>\"light\"</code>, <code>\"outline\"</code>, <code>\"pills\"</code>, <code>\"separated\"</code>, <code>\"solid\"</code>, <code>\"subtle\"</code>, <code>\"text\"</code>, <code>\"transparent\"</code>, <code>\"unstyled\"</code>, <code>\"vertical\"</code>, <code>\"white\"</code> | Variant passed from parent component, sets `data-variant` |\n| <code>vectorEffect</code> | no | <code>string &#124; number</code> | — | — |\n| <code>version</code> | no | <code>string</code> | — | — |\n| <code>vertAdvY</code> | no | <code>string &#124; number</code> | — | — |\n| <code>vertOriginX</code> | no | <code>string &#124; number</code> | — | — |\n| <code>vertOriginY</code> | no | <code>string &#124; number</code> | — | — |\n| <code>viewBox</code> | no | <code>string</code> | — | — |\n| <code>viewTarget</code> | no | <code>string &#124; number</code> | — | — |\n| <code>visibility</code> | no | <code>string &#124; number</code> | — | — |\n| <code>visibleFrom</code> | no | <code>MantineBreakpoint</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Breakpoint below which the component is hidden with `display: none` |\n| <code>vocab</code> | no | <code>string</code> | — | — |\n| <code>w</code> | no | <code>StyleProp&lt;Property.Width&lt;string &#124; number&gt;&gt;</code> | — | Width, theme key: theme.spacing |\n| <code>width</code> | no | <code>string &#124; number</code> | — | — |\n| <code>widths</code> | no | <code>string &#124; number</code> | — | — |\n| <code>withBorder</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Adds border to the root element |\n| <code>wordSpacing</code> | no | <code>string &#124; number</code> | — | — |\n| <code>wrap</code> | no | <code>string</code> | — | — |\n| <code>writingMode</code> | no | <code>string &#124; number</code> | — | — |\n| <code>x</code> | no | <code>string &#124; number</code> | — | — |\n| <code>x1</code> | no | <code>string &#124; number</code> | — | — |\n| <code>x2</code> | no | <code>string &#124; number</code> | — | — |\n| <code>xChannelSelector</code> | no | <code>string</code> | — | — |\n| <code>xHeight</code> | no | <code>string &#124; number</code> | — | — |\n| <code>xlinkActuate</code> | no | <code>string</code> | — | — |\n| <code>xlinkArcrole</code> | no | <code>string</code> | — | — |\n| <code>xlinkHref</code> | no | <code>string</code> | — | — |\n| <code>xlinkRole</code> | no | <code>string</code> | — | — |\n| <code>xlinkShow</code> | no | <code>string</code> | — | — |\n| <code>xlinkTitle</code> | no | <code>string</code> | — | — |\n| <code>xlinkType</code> | no | <code>string</code> | — | — |\n| <code>xmlBase</code> | no | <code>string</code> | — | — |\n| <code>xmlLang</code> | no | <code>string</code> | — | — |\n| <code>xmlSpace</code> | no | <code>string</code> | — | — |\n| <code>xmlns</code> | no | <code>string</code> | — | — |\n| <code>xmlnsXlink</code> | no | <code>string</code> | — | — |\n| <code>y</code> | no | <code>string &#124; number</code> | — | — |\n| <code>y1</code> | no | <code>string &#124; number</code> | — | — |\n| <code>y2</code> | no | <code>string &#124; number</code> | — | — |\n| <code>yChannelSelector</code> | no | <code>string</code> | — | — |\n| <code>z</code> | no | <code>string &#124; number</code> | — | — |\n| <code>zoomAndPan</code> | no | <code>string</code> | — | — |\n\n## Blocked capabilities\n\n| Kind | Name | Reason |\n| --- | --- | --- |\n| prop | <code>__proto__</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>apply</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>arguments</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>autoFocus</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>backdropFilter</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>behavior</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>bottom</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>call</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>callee</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>caller</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>children</code> | Children must be expressed as interpreted JSX, not passed as a raw prop. |\n| prop | <code>className</code> | Unscoped class injection can escape widget CSS isolation. |\n| prop | <code>classNames</code> | Unscoped class injection can escape widget CSS isolation. |\n| prop | <code>classes</code> | Unscoped class injection can escape widget CSS isolation. |\n| prop | <code>clipPath</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>component</code> | Polymorphic roots can replace the Homarr-owned element boundary. |\n| prop | <code>constructor</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>content</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>contentEditable</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>dangerouslySetInnerHTML</code> | Raw HTML injection is not available to authored widgets. |\n| prop | <code>filter</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>form</code> | External form submission is outside the named-request security boundary. |\n| prop | <code>formAction</code> | External form submission is outside the named-request security boundary. |\n| prop | <code>formEncType</code> | External form submission is outside the named-request security boundary. |\n| prop | <code>formMethod</code> | External form submission is outside the named-request security boundary. |\n| prop | <code>formNoValidate</code> | External form submission is outside the named-request security boundary. |\n| prop | <code>formTarget</code> | External form submission is outside the named-request security boundary. |\n| prop | <code>innerRef</code> | Refs expose underlying React components and DOM nodes. |\n| prop | <code>inset</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>left</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>mask</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>ping</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>pointerEvents</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>popover</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>popoverTarget</code> | Portal targeting can render or interact outside the widget root. |\n| prop | <code>popoverTargetAction</code> | Portal targeting can render or interact outside the widget root. |\n| prop | <code>portalProps</code> | Portal targeting can render or interact outside the widget root. |\n| prop | <code>pos</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>position</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>prototype</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>ref</code> | Refs expose underlying React components and DOM nodes. |\n| prop | <code>renderRoot</code> | Polymorphic roots can replace the Homarr-owned element boundary. |\n| prop | <code>right</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>srcDoc</code> | Raw HTML injection is not available to authored widgets. |\n| prop | <code>suppressContentEditableWarning</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>suppressHydrationWarning</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>top</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop | <code>withinPortal</code> | Portal targeting can render or interact outside the widget root. |\n| prop | <code>zIndex</code> | This capability is blocked by the Custom JSX safety boundary. |\n| prop-pattern | <code>on*</code> | Authored event callbacks can execute code outside the declarative runtime. |\n| prop-pattern | <code>*Ref</code> | Refs expose underlying React components and DOM nodes. |\n| prop-pattern | <code>__*</code> | Private and prototype-related properties are outside the supported authoring surface. |\n"
    },
    {
      "path": "references/mantine-core.md",
      "content": "# Mantine Core\n\n> Generated from `component-catalog-v1.json`. Catalog schema v1 · Custom Widget 2.0.0 · Mantine 9.4.1. Do not edit this file by hand.\n\nPackage: `@mantine/core`. Effective props combine the [shared prop API](components.md#shared-prop-api) with each component's specific props below. Component-specific records override shared records with the same name.\n\n## Package guidance\n\nUse declarative props and `bind` adapters instead of event callbacks. Homarr scopes supported overlays to the widget root. Use Homarr's `RecursiveList` when a tree needs a custom arbitrary-depth node template.\n\n## Enabled inventory\n\n<code>Accordion</code>, <code>Accordion.Chevron</code>, <code>Accordion.Control</code>, <code>Accordion.Item</code>, <code>Accordion.Panel</code>, <code>AccordionChevron</code>, <code>AccordionControl</code>, <code>AccordionItem</code>, <code>AccordionPanel</code>, <code>ActionIcon</code>, <code>ActionIcon.Group</code>, <code>ActionIcon.GroupSection</code>, <code>ActionIconGroup</code>, <code>ActionIconGroupSection</code>, <code>Alert</code>, <code>AlphaSlider</code>, <code>Anchor</code>, <code>AngleSlider</code>, <code>AspectRatio</code>, <code>Autocomplete</code>, <code>Avatar</code>, <code>Avatar.Group</code>, <code>AvatarGroup</code>, <code>BackgroundImage</code>, <code>Badge</code>, <code>Blockquote</code>, <code>Box</code>, <code>Breadcrumbs</code>, <code>Burger</code>, <code>Button</code>, <code>Button.Group</code>, <code>Button.GroupSection</code>, <code>ButtonGroup</code>, <code>ButtonGroupSection</code>, <code>Card</code>, <code>Card.Section</code>, <code>CardSection</code>, <code>Center</code>, <code>CheckIcon</code>, <code>Checkbox</code>, <code>Checkbox.Card</code>, <code>Checkbox.Group</code>, <code>Checkbox.Indicator</code>, <code>CheckboxCard</code>, <code>CheckboxGroup</code>, <code>CheckboxIndicator</code>, <code>Chip</code>, <code>Chip.Group</code>, <code>ChipGroup</code>, <code>CloseButton</code>, <code>CloseIcon</code>, <code>Code</code>, <code>Collapse</code>, <code>ColorInput</code>, <code>ColorPicker</code>, <code>ColorSwatch</code>, <code>Container</code>, <code>CopyButton</code>, <code>DataList</code>, <code>DataList.Item</code>, <code>DataList.ItemLabel</code>, <code>DataList.ItemValue</code>, <code>DataListItem</code>, <code>DataListItemLabel</code>, <code>DataListItemValue</code>, <code>Divider</code>, <code>EmptyState</code>, <code>EmptyState.Actions</code>, <code>EmptyState.Description</code>, <code>EmptyState.Indicator</code>, <code>EmptyState.Title</code>, <code>EmptyStateActions</code>, <code>EmptyStateDescription</code>, <code>EmptyStateIndicator</code>, <code>EmptyStateTitle</code>, <code>Fieldset</code>, <code>FlatTreeNode</code>, <code>Flex</code>, <code>FloatingArrow</code>, <code>FloatingIndicator</code>, <code>Grid</code>, <code>Grid.Col</code>, <code>GridCol</code>, <code>Group</code>, <code>Highlight</code>, <code>HoverCard</code>, <code>HoverCard.Dropdown</code>, <code>HoverCard.Group</code>, <code>HoverCard.Target</code>, <code>HoverCardDropdown</code>, <code>HoverCardGroup</code>, <code>HoverCardTarget</code>, <code>HueSlider</code>, <code>Image</code>, <code>Indicator</code>, <code>JsonInput</code>, <code>Kbd</code>, <code>List</code>, <code>List.Item</code>, <code>ListItem</code>, <code>Loader</code>, <code>LoadingOverlay</code>, <code>Mark</code>, <code>Marquee</code>, <code>MaskInput</code>, <code>Menu</code>, <code>Menu.CheckboxGroup</code>, <code>Menu.CheckboxItem</code>, <code>Menu.ContextMenu</code>, <code>Menu.Divider</code>, <code>Menu.Dropdown</code>, <code>Menu.Item</code>, <code>Menu.Label</code>, <code>Menu.RadioGroup</code>, <code>Menu.RadioItem</code>, <code>Menu.Search</code>, <code>Menu.Sub</code>, <code>Menu.Target</code>, <code>MenuCheckboxGroup</code>, <code>MenuCheckboxItem</code>, <code>MenuContextMenu</code>, <code>MenuDivider</code>, <code>MenuDropdown</code>, <code>MenuItem</code>, <code>MenuLabel</code>, <code>MenuRadioGroup</code>, <code>MenuRadioItem</code>, <code>MenuSearch</code>, <code>MenuSub</code>, <code>MenuSub.Dropdown</code>, <code>MenuSub.Item</code>, <code>MenuSub.Target</code>, <code>MenuSubDropdown</code>, <code>MenuSubItem</code>, <code>MenuSubTarget</code>, <code>MenuTarget</code>, <code>MultiSelect</code>, <code>NativeScrollArea</code>, <code>NativeSelect</code>, <code>NavLink</code>, <code>Notification</code>, <code>NumberFormatter</code>, <code>NumberInput</code>, <code>OverflowList</code>, <code>Overlay</code>, <code>Pagination</code>, <code>Pagination.Control</code>, <code>Pagination.Dots</code>, <code>Pagination.First</code>, <code>Pagination.Items</code>, <code>Pagination.Label</code>, <code>Pagination.Last</code>, <code>Pagination.Next</code>, <code>Pagination.Previous</code>, <code>Pagination.Root</code>, <code>PaginationControl</code>, <code>PaginationDots</code>, <code>PaginationFirst</code>, <code>PaginationItems</code>, <code>PaginationLabel</code>, <code>PaginationLast</code>, <code>PaginationNext</code>, <code>PaginationPrevious</code>, <code>PaginationRoot</code>, <code>Paper</code>, <code>PasswordInput</code>, <code>Pill</code>, <code>Pill.Group</code>, <code>PillGroup</code>, <code>PinInput</code>, <code>Popover</code>, <code>Popover.ContextMenu</code>, <code>Popover.Dropdown</code>, <code>Popover.Target</code>, <code>PopoverContextMenu</code>, <code>PopoverDropdown</code>, <code>PopoverTarget</code>, <code>Progress</code>, <code>Progress.Label</code>, <code>Progress.Root</code>, <code>Progress.Section</code>, <code>ProgressLabel</code>, <code>ProgressRoot</code>, <code>ProgressSection</code>, <code>Radio</code>, <code>Radio.Card</code>, <code>Radio.Group</code>, <code>Radio.Indicator</code>, <code>RadioCard</code>, <code>RadioGroup</code>, <code>RadioIcon</code>, <code>RadioIndicator</code>, <code>RangeSlider</code>, <code>Rating</code>, <code>RingProgress</code>, <code>RollingNumber</code>, <code>ScrollArea</code>, <code>ScrollArea.Autosize</code>, <code>ScrollAreaAutosize</code>, <code>Scroller</code>, <code>SegmentedControl</code>, <code>Select</code>, <code>SemiCircleProgress</code>, <code>SimpleGrid</code>, <code>Skeleton</code>, <code>Slider</code>, <code>Space</code>, <code>Splitter</code>, <code>Splitter.Pane</code>, <code>SplitterPane</code>, <code>Spoiler</code>, <code>Stack</code>, <code>Stepper</code>, <code>Stepper.Completed</code>, <code>Stepper.Step</code>, <code>StepperCompleted</code>, <code>StepperStep</code>, <code>Switch</code>, <code>Switch.Group</code>, <code>SwitchGroup</code>, <code>Table</code>, <code>Table.Caption</code>, <code>Table.DataRenderer</code>, <code>Table.ScrollContainer</code>, <code>Table.Tbody</code>, <code>Table.Td</code>, <code>Table.Tfoot</code>, <code>Table.Th</code>, <code>Table.Thead</code>, <code>Table.Tr</code>, <code>TableCaption</code>, <code>TableScrollContainer</code>, <code>TableTbody</code>, <code>TableTd</code>, <code>TableTfoot</code>, <code>TableTh</code>, <code>TableThead</code>, <code>TableTr</code>, <code>Tabs</code>, <code>Tabs.List</code>, <code>Tabs.Panel</code>, <code>Tabs.Tab</code>, <code>TabsList</code>, <code>TabsPanel</code>, <code>TabsTab</code>, <code>TagsInput</code>, <code>Text</code>, <code>TextInput</code>, <code>Textarea</code>, <code>ThemeIcon</code>, <code>Timeline</code>, <code>Timeline.Item</code>, <code>TimelineItem</code>, <code>Title</code>, <code>Tooltip</code>, <code>Tooltip.Floating</code>, <code>Tooltip.Group</code>, <code>TooltipFloating</code>, <code>TooltipGroup</code>, <code>Tree</code>, <code>TreeSelect</code>, <code>TreeSelectOption</code>, <code>Typography</code>, <code>UnstyledButton</code>, <code>VisuallyHidden</code>\n\n## Denied inventory\n\n<code>Affix</code>, <code>AppShell</code>, <code>AppShell.Aside</code>, <code>AppShell.Footer</code>, <code>AppShell.Header</code>, <code>AppShell.Main</code>, <code>AppShell.Navbar</code>, <code>AppShell.Section</code>, <code>AppShellAside</code>, <code>AppShellFooter</code>, <code>AppShellHeader</code>, <code>AppShellMain</code>, <code>AppShellNavbar</code>, <code>AppShellSection</code>, <code>ColorSchemeScript</code>, <code>Combobox</code>, <code>Combobox.Chevron</code>, <code>Combobox.ClearButton</code>, <code>Combobox.Dropdown</code>, <code>Combobox.DropdownTarget</code>, <code>Combobox.Empty</code>, <code>Combobox.EventsTarget</code>, <code>Combobox.Footer</code>, <code>Combobox.Group</code>, <code>Combobox.Header</code>, <code>Combobox.HiddenInput</code>, <code>Combobox.Option</code>, <code>Combobox.Options</code>, <code>Combobox.Search</code>, <code>Combobox.Target</code>, <code>ComboboxChevron</code>, <code>ComboboxClearButton</code>, <code>ComboboxDropdown</code>, <code>ComboboxDropdownTarget</code>, <code>ComboboxEmpty</code>, <code>ComboboxEventsTarget</code>, <code>ComboboxFooter</code>, <code>ComboboxGroup</code>, <code>ComboboxHeader</code>, <code>ComboboxHiddenInput</code>, <code>ComboboxOption</code>, <code>ComboboxOptions</code>, <code>ComboboxPopover</code>, <code>ComboboxPopover.Target</code>, <code>ComboboxPopoverTarget</code>, <code>ComboboxSearch</code>, <code>ComboboxTarget</code>, <code>Dialog</code>, <code>DirectionProvider</code>, <code>Drawer</code>, <code>Drawer.Body</code>, <code>Drawer.CloseButton</code>, <code>Drawer.Content</code>, <code>Drawer.Header</code>, <code>Drawer.Overlay</code>, <code>Drawer.Root</code>, <code>Drawer.Stack</code>, <code>Drawer.Title</code>, <code>DrawerBody</code>, <code>DrawerCloseButton</code>, <code>DrawerContent</code>, <code>DrawerHeader</code>, <code>DrawerOverlay</code>, <code>DrawerRoot</code>, <code>DrawerStack</code>, <code>DrawerTitle</code>, <code>FileButton</code>, <code>FileInput</code>, <code>FloatingWindow</code>, <code>FocusTrap</code>, <code>FocusTrap.InitialFocus</code>, <code>FocusTrapInitialFocus</code>, <code>HeadlessMantineProvider</code>, <code>InlineStyles</code>, <code>Input</code>, <code>Input.ClearButton</code>, <code>Input.Description</code>, <code>Input.Error</code>, <code>Input.Label</code>, <code>Input.Placeholder</code>, <code>Input.Success</code>, <code>Input.Wrapper</code>, <code>InputBase</code>, <code>InputClearButton</code>, <code>InputClearSection</code>, <code>InputDescription</code>, <code>InputError</code>, <code>InputLabel</code>, <code>InputPlaceholder</code>, <code>InputSuccess</code>, <code>InputWrapper</code>, <code>MantineProvider</code>, <code>MantineThemeProvider</code>, <code>Menubar</code>, <code>Menubar.Dropdown</code>, <code>Menubar.Menu</code>, <code>Menubar.Target</code>, <code>MenubarDropdown</code>, <code>MenubarMenu</code>, <code>MenubarTarget</code>, <code>Modal</code>, <code>Modal.Body</code>, <code>Modal.CloseButton</code>, <code>Modal.Content</code>, <code>Modal.Header</code>, <code>Modal.Overlay</code>, <code>Modal.Root</code>, <code>Modal.Stack</code>, <code>Modal.Title</code>, <code>ModalBase</code>, <code>ModalBaseBody</code>, <code>ModalBaseCloseButton</code>, <code>ModalBaseContent</code>, <code>ModalBaseHeader</code>, <code>ModalBaseOverlay</code>, <code>ModalBaseTitle</code>, <code>ModalBody</code>, <code>ModalCloseButton</code>, <code>ModalContent</code>, <code>ModalHeader</code>, <code>ModalOverlay</code>, <code>ModalRoot</code>, <code>ModalStack</code>, <code>ModalTitle</code>, <code>OptionalPortal</code>, <code>OptionsDropdown</code>, <code>PillsInput</code>, <code>PillsInput.Field</code>, <code>PillsInputField</code>, <code>Portal</code>, <code>RemoveScroll</code>, <code>TableOfContents</code>, <code>Transition</code>\n\n## Component records\n\n<a id=\"component-accordion\"></a>\n### `Accordion`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `multiple` is true\n- Subcomponents: <code>Accordion.Chevron</code>, <code>Accordion.Control</code>, <code>Accordion.Item</code>, <code>Accordion.Panel</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; content?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; item?: Record&lt;string, any&gt;; ... 4 more ...; control?: Record&lt;...&gt;; }</code> | — | — |\n| <code>chevron</code> | no | <code>React.ReactNode</code> | — | Custom chevron icon |\n| <code>chevronIconSize</code> | no | <code>string &#124; number</code> | — | Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron. |\n| <code>chevronPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the chevron relative to the item label |\n| <code>chevronSize</code> | no | <code>string &#124; number</code> | — | Size of the chevron icon container |\n| <code>disableChevronRotation</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, chevron rotation is disabled |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. |\n| <code>loop</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, arrow keys loop through items (first to last and last to first) |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Transition duration in ms |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-accordion-2e-chevron\"></a>\n### `Accordion.Chevron`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-accordion-2e-control\"></a>\n### `Accordion.Control`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>chevron</code> | no | <code>React.ReactNode</code> | — | Custom chevron icon |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Icon displayed next to the label |\n\n<a id=\"component-accordion-2e-item\"></a>\n### `Accordion.Item`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-accordion-2e-panel\"></a>\n### `Accordion.Panel`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting. |\n\n<a id=\"component-accordionchevron\"></a>\n### `AccordionChevron`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion-chevron/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-accordioncontrol\"></a>\n### `AccordionControl`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion-control/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>chevron</code> | no | <code>React.ReactNode</code> | — | Custom chevron icon |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Icon displayed next to the label |\n\n<a id=\"component-accordionitem\"></a>\n### `AccordionItem`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion-item/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-accordionpanel\"></a>\n### `AccordionPanel`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/accordion-panel/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting. |\n\n<a id=\"component-actionicon\"></a>\n### `ActionIcon`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/action-icon/)\n- Temporary bind: not available\n- Subcomponents: <code>ActionIcon.Group</code>, <code>ActionIcon.GroupSection</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; icon?: Record&lt;string, any&gt;; loader?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient values used with `variant=\"gradient\"`. |\n| <code>loaderProps</code> | no | <code>LoaderProps</code> | — | Props passed down to the `Loader` component. Ignored when `loading` prop is not set. |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, `Loader` component is displayed instead of the `children` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-actionicon-2e-group\"></a>\n### `ActionIcon.Group`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/action-icon/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>borderWidth</code> | no | <code>string &#124; number</code> | — | `border-width` of the child components. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-actionicon-2e-groupsection\"></a>\n### `ActionIcon.GroupSection`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/action-icon/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ groupSection?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient values used with `variant=\"gradient\"`. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-actionicongroup\"></a>\n### `ActionIconGroup`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/action-icon-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>borderWidth</code> | no | <code>string &#124; number</code> | — | `border-width` of the child components. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-actionicongroupsection\"></a>\n### `ActionIconGroupSection`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/action-icon-group-section/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ groupSection?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient values used with `variant=\"gradient\"`. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-affix\"></a>\n### `Affix`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/affix/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes the widget layout boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-alert\"></a>\n### `Alert`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/alert/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; title?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; icon?: Record&lt;...&gt;; wrapper?: Record&lt;...&gt;; message?: Record&lt;...&gt;; closeButton?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>closeButtonLabel</code> | no | <code>string</code> | — | Close button `aria-label` |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Icon displayed next to the title |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCloseButton</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether close button should be displayed |\n\n<a id=\"component-alphaslider\"></a>\n### `AlphaSlider`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/alpha-slider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ slider?: Record&lt;string, any&gt;; sliderOverlay?: Record&lt;string, any&gt;; thumb?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-anchor\"></a>\n### `Anchor`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/anchor/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient configuration, ignored when `variant` is not `gradient` |\n| <code>inherit</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether font properties should be inherited from the parent |\n| <code>inline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Sets `line-height` to 1 for centering |\n| <code>lineClamp</code> | no | <code>number</code> | — | Number of lines after which Text will be truncated |\n| <code>textWrap</code> | no | <code>\"wrap\" &#124; \"nowrap\" &#124; \"balance\" &#124; \"pretty\" &#124; \"stable\"</code> | <code>\"balance\"</code>, <code>\"nowrap\"</code>, <code>\"pretty\"</code>, <code>\"stable\"</code>, <code>\"wrap\"</code> | Controls `text-wrap` CSS property |\n| <code>truncate</code> | no | <code>false &#124; true &#124; \"end\" &#124; \"start\"</code> | <code>\"end\"</code>, <code>false</code>, <code>\"start\"</code>, <code>true</code> | Side on which Text must be truncated, if `true`, text is truncated from the start |\n| <code>underline</code> | no | <code>\"always\" &#124; \"hover\" &#124; \"not-hover\" &#124; \"never\"</code> | <code>\"always\"</code>, <code>\"hover\"</code>, <code>\"never\"</code>, <code>\"not-hover\"</code> | Defines when `text-decoration: underline` styles are applied. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-angleslider\"></a>\n### `AngleSlider`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/angle-slider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; mark?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; thumb?: Record&lt;string, any&gt;; marks?: Record&lt;...&gt;; }</code> | — | — |\n| <code>hiddenInputProps</code> | no | <code>React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;</code> | — | Props passed down to the hidden input |\n| <code>marks</code> | no | <code>{ value: number; label?: string; }[]</code> | — | Array of marks displayed on the slider |\n| <code>restrictToMarks</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the selection is allowed only from the given marks array |\n| <code>thumbSize</code> | no | <code>number</code> | — | Size of the thumb in px. Calculated based on the `size` value by default. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withLabel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the label is displayed inside the slider |\n\n<a id=\"component-appshell\"></a>\n### `AppShell`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell/)\n- Temporary bind: not available\n- Subcomponents: <code>AppShell.Aside</code>, <code>AppShell.Footer</code>, <code>AppShell.Header</code>, <code>AppShell.Main</code>, <code>AppShell.Navbar</code>, <code>AppShell.Section</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshell-2e-aside\"></a>\n### `AppShell.Aside`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshell-2e-footer\"></a>\n### `AppShell.Footer`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshell-2e-header\"></a>\n### `AppShell.Header`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshell-2e-main\"></a>\n### `AppShell.Main`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshell-2e-navbar\"></a>\n### `AppShell.Navbar`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshell-2e-section\"></a>\n### `AppShell.Section`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshellaside\"></a>\n### `AppShellAside`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell-aside/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshellfooter\"></a>\n### `AppShellFooter`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell-footer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshellheader\"></a>\n### `AppShellHeader`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell-header/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshellmain\"></a>\n### `AppShellMain`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell-main/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshellnavbar\"></a>\n### `AppShellNavbar`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell-navbar/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-appshellsection\"></a>\n### `AppShellSection`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/app-shell-section/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-aspectratio\"></a>\n### `AspectRatio`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/aspect-ratio/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>ratio</code> | no | <code>number</code> | — | Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-autocomplete\"></a>\n### `Autocomplete`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/autocomplete/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; option?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; ... 11 more ...; groupLabel?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoSelectOnBlur</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the highlighted option is selected when the input loses focus |\n| <code>clearButtonProps</code> | no | <code>InputClearButtonProps</code> | — | Props passed down to the clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the clear button is displayed when the component has a value |\n| <code>comboboxProps</code> | no | <code>ComboboxProps</code> | — | Props passed down to `Combobox` component |\n| <code>data</code> | no | <code>ComboboxGenericData</code> | — | Data used to display options. Values must be unique. |\n| <code>defaultDropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled dropdown initial opened state |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>dropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled dropdown opened state |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>floatingHeight</code> | no | <code>\"viewport\"</code> | <code>\"viewport\"</code> | If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>limit</code> | no | <code>number</code> | — | Maximum number of options displayed at a time, `Infinity` by default |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxDropdownHeight</code> | no | <code>string &#124; number</code> | — | `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default |\n| <code>openOnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown opens when the input receives focus |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>scrollAreaProps</code> | no | <code>ScrollAreaProps</code> | — | Props passed to the underlying `ScrollArea` component in the dropdown |\n| <code>selectFirstOptionOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the first option is selected when value changes, `false` by default |\n| <code>selectFirstOptionOnDropdownOpen</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the first option is selected when dropdown opens, `false` by default |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withScrollArea</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-avatar\"></a>\n### `Avatar`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/avatar/)\n- Temporary bind: not available\n- Subcomponents: <code>Avatar.Group</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowedInitialsColors</code> | no | <code>DefaultMantineColor[]</code> | — | A list of colors that is used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark. |\n| <code>attributes</code> | no | <code>{ image?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; placeholder?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient configuration for `variant=\"gradient\"` |\n| <code>imageProps</code> | no | <code>React.DetailedHTMLProps&lt;React.ImgHTMLAttributes&lt;HTMLImageElement&gt;, HTMLImageElement&gt;</code> | — | Attributes passed down to `img` element |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-avatar-2e-group\"></a>\n### `Avatar.Group`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/avatar/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-avatargroup\"></a>\n### `AvatarGroup`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/avatar-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-backgroundimage\"></a>\n### `BackgroundImage`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/background-image/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-badge\"></a>\n### `Badge`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/badge/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>circle</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether Badge should take 100% of its parent width |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient configuration used when `variant=\\\"gradient\\\"` |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content displayed on the left side of the badge label |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content displayed on the right side of the badge label |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-blockquote\"></a>\n### `Blockquote`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/blockquote/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ cite?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; icon?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>cite</code> | no | <code>React.ReactNode</code> | — | Reference to a cited quote |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Blockquote icon, displayed at the top left side |\n| <code>iconSize</code> | no | <code>string &#124; number</code> | — | Controls icon `width` and `height`, numbers are converted to rem |\n| <code>textWrap</code> | no | <code>\"wrap\" &#124; \"nowrap\" &#124; \"balance\" &#124; \"pretty\" &#124; \"stable\"</code> | <code>\"balance\"</code>, <code>\"nowrap\"</code>, <code>\"pretty\"</code>, <code>\"stable\"</code>, <code>\"wrap\"</code> | Controls `text-wrap` CSS property |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-box\"></a>\n### `Box`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/box/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-breadcrumbs\"></a>\n### `Breadcrumbs`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/breadcrumbs/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; separator?: Record&lt;string, any&gt;; breadcrumb?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>separator</code> | no | <code>React.ReactNode</code> | — | Separator between children |\n| <code>separatorMargin</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Controls spacing between separator and breadcrumb |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-burger\"></a>\n### `Burger`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/burger/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; burger?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>lineSize</code> | no | <code>string &#124; number</code> | — | Controls height of lines, by default calculated based on `size` prop |\n| <code>opened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | State of the burger, when `true` burger is transformed into X |\n| <code>transitionDuration</code> | no | <code>number</code> | — | `transition-duration` property value in ms |\n| <code>transitionTimingFunction</code> | no | <code>string</code> | — | `transition-timing-function` property value |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-button\"></a>\n### `Button`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/button/)\n- Temporary bind: not available\n- Subcomponents: <code>Button.Group</code>, <code>Button.GroupSection</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; loader?: Record&lt;string, any&gt;; inner?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Sets `width: 100%` |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient configuration used for `variant=\"gradient\"` |\n| <code>justify</code> | no | <code>Property.JustifyContent</code> | <code>\"-moz-initial\"</code>, <code>\"center\"</code>, <code>\"end\"</code>, <code>\"flex-end\"</code>, <code>\"flex-start\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"left\"</code>, <code>\"normal\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"right\"</code>, <code>\"space-around\"</code>, <code>\"space-between\"</code>, <code>\"space-evenly\"</code>, <code>\"start\"</code>, <code>\"stretch\"</code>, <code>\"unset\"</code> | Sets `justify-content` of `inner` element, can be used to change distribution of sections and label |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content on the left side of the button label |\n| <code>loaderProps</code> | no | <code>LoaderProps</code> | — | Props added to the `Loader` component (only visible when `loading` prop is set) |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the `Loader` component is displayed over the button |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content on the right side of the button label |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-button-2e-group\"></a>\n### `Button.Group`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>borderWidth</code> | no | <code>string &#124; number</code> | — | `border-width` of the child `Button` components. Numbers are converted to rem. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-button-2e-groupsection\"></a>\n### `Button.GroupSection`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ groupSection?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient configuration used when `variant=\"gradient\"` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-buttongroup\"></a>\n### `ButtonGroup`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/button-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>borderWidth</code> | no | <code>string &#124; number</code> | — | `border-width` of the child `Button` components. Numbers are converted to rem. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-buttongroupsection\"></a>\n### `ButtonGroupSection`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/button-group-section/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ groupSection?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient configuration used when `variant=\"gradient\"` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-card\"></a>\n### `Card`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/card/)\n- Temporary bind: not available\n- Subcomponents: <code>Card.Section</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>padding</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.spacing` or any valid CSS value to set padding |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-card-2e-section\"></a>\n### `Card.Section`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/card/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>inheritPadding</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the section inherits padding from the parent `Card` |\n\n<a id=\"component-cardsection\"></a>\n### `CardSection`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/card-section/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>inheritPadding</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the section inherits padding from the parent `Card` |\n\n<a id=\"component-center\"></a>\n### `Center`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/center/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>inline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, `inline-flex` is used instead of `flex` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-checkicon\"></a>\n### `CheckIcon`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/check-icon/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-checkbox\"></a>\n### `Checkbox`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/checkbox/)\n- Temporary bind: `boolean` via `defaultChecked`; read from `inputs.<bindName>`\n- Subcomponents: <code>Checkbox.Card</code>, <code>Checkbox.Group</code>, <code>Checkbox.Indicator</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 4 more ...; labelWrapper?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts icon color based on background color for `filled` variant |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Description below the label |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Error message below the label |\n| <code>iconColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. |\n| <code>indeterminate</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Indeterminate state of the checkbox. If set, `checked` prop is dismissed. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | `label` associated with the checkbox |\n| <code>labelPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the label relative to the input |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, applies error styles to the checkbox when `error` prop is set |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the root element |\n\n<a id=\"component-checkbox-2e-card\"></a>\n### `Checkbox.Card`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/checkbox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ card?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-checkbox-2e-group\"></a>\n### `Checkbox.Group`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/checkbox/)\n- Temporary bind: `string[]` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; description?: Record&lt;string, any&gt;; error?: Record&lt;string, any&gt;; success?: Record&lt;...&gt;; required?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>hiddenInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the hidden input for uncontrolled forms |\n| <code>hiddenInputValuesSeparator</code> | no | <code>string</code> | — | Separator for values in the hidden input for uncontrolled forms |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelElement</code> | no | <code>\"div\" &#124; \"label\"</code> | <code>\"div\"</code>, <code>\"label\"</code> | Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>maxSelectedValues</code> | no | <code>number</code> | — | Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the root element (`Input.Wrapper` component) |\n\n<a id=\"component-checkbox-2e-indicator\"></a>\n### `Checkbox.Indicator`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/checkbox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ icon?: Record&lt;string, any&gt;; indicator?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts icon color based on background color for `filled` variant |\n| <code>iconColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` |\n| <code>indeterminate</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Indeterminate state of the checkbox. If set, `checked` prop is ignored. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-checkboxcard\"></a>\n### `CheckboxCard`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/checkbox-card/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ card?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-checkboxgroup\"></a>\n### `CheckboxGroup`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/checkbox-group/)\n- Temporary bind: `string[]` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; description?: Record&lt;string, any&gt;; error?: Record&lt;string, any&gt;; success?: Record&lt;...&gt;; required?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>hiddenInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the hidden input for uncontrolled forms |\n| <code>hiddenInputValuesSeparator</code> | no | <code>string</code> | — | Separator for values in the hidden input for uncontrolled forms |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelElement</code> | no | <code>\"div\" &#124; \"label\"</code> | <code>\"div\"</code>, <code>\"label\"</code> | Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>maxSelectedValues</code> | no | <code>number</code> | — | Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the root element (`Input.Wrapper` component) |\n\n<a id=\"component-checkboxindicator\"></a>\n### `CheckboxIndicator`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/checkbox-indicator/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ icon?: Record&lt;string, any&gt;; indicator?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts icon color based on background color for `filled` variant |\n| <code>iconColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` |\n| <code>indeterminate</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Indeterminate state of the checkbox. If set, `checked` prop is ignored. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-chip\"></a>\n### `Chip`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/chip/)\n- Temporary bind: not available\n- Subcomponents: <code>Chip.Group</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; iconWrapper?: Record&lt;string, any&gt;; checkIcon?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on the chip background color for `filled` variant |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Any element or component to replace the default icon |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the root element |\n\n<a id=\"component-chip-2e-group\"></a>\n### `Chip.Group`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/chip/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `multiple` is true\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-chipgroup\"></a>\n### `ChipGroup`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/chip-group/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `multiple` is true\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-closebutton\"></a>\n### `CloseButton`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/close-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | React node to replace the default close icon. If set, `iconSize` prop is ignored. |\n| <code>iconSize</code> | no | <code>string &#124; number</code> | — | `X` icon `width` and `height` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-closeicon\"></a>\n### `CloseIcon`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/close-icon/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-code\"></a>\n### `Code`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/code/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>block</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, code is rendered in `pre` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-collapse\"></a>\n### `Collapse`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/collapse/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>animateOpacity</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the opacity is animated |\n| <code>expanded</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Expanded state |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Transition duration in ms |\n| <code>transitionTimingFunction</code> | no | <code>string</code> | — | Transition timing function |\n\n<a id=\"component-colorinput\"></a>\n### `ColorInput`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/color-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; ... 19 more ...; swatch?: Record&lt;...&gt;; }</code> | — | — |\n| <code>closeOnColorSwatchClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is closed when one of the color swatches is clicked |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>disallowInput</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If input is not allowed, the user can only pick value with color picker and swatches |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>eyeDropperButtonProps</code> | no | <code>Record&lt;string, any&gt;</code> | — | Props passed down to the eye dropper button |\n| <code>eyeDropperIcon</code> | no | <code>React.ReactNode</code> | — | An icon to replace the default eye dropper icon |\n| <code>fixOnBlur</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the input value resets to the last known valid value when the input loses focus |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>popoverProps</code> | no | <code>PopoverProps</code> | — | Props passed down to the `Popover` component |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>swatches</code> | no | <code>string[]</code> | — | A list of colors used to display swatches list below the color picker |\n| <code>swatchesPerRow</code> | no | <code>number</code> | — | Number of swatches per row |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withEyeDropper</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the eye dropper button is displayed in the right section |\n| <code>withPicker</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If `false`, the component displays only swatches |\n| <code>withPreview</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the preview color swatch is displayed in the left section of the input |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-colorpicker\"></a>\n### `ColorPicker`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/color-picker/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>alphaLabel</code> | no | <code>string</code> | — | Alpha slider `aria-label` |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; slider?: Record&lt;string, any&gt;; wrapper?: Record&lt;string, any&gt;; sliderOverlay?: Record&lt;string, any&gt;; ... 6 more ...; swatch?: Record&lt;...&gt;; }</code> | — | — |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the component takes 100% width of its container |\n| <code>hiddenInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props spread to the hidden input |\n| <code>hueLabel</code> | no | <code>string</code> | — | Hue slider `aria-label` |\n| <code>saturationLabel</code> | no | <code>string</code> | — | Saturation slider `aria-label` |\n| <code>swatches</code> | no | <code>string[]</code> | — | A list of colors used to display swatches list below the color picker |\n| <code>swatchesPerRow</code> | no | <code>number</code> | — | Number of swatches per row |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withPicker</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If `false`, the component displays only swatches |\n\n<a id=\"component-colorschemescript\"></a>\n### `ColorSchemeScript`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/color-scheme-script/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Writes global document state.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-colorswatch\"></a>\n### `ColorSwatch`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/color-swatch/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; alphaOverlay?: Record&lt;string, any&gt;; shadowOverlay?: Record&lt;string, any&gt;; colorOverlay?: Record&lt;...&gt;; childrenOverlay?: Record&lt;...&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withShadow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the swatch has inner `box-shadow` |\n\n<a id=\"component-combobox\"></a>\n### `Combobox`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: <code>Combobox.Chevron</code>, <code>Combobox.ClearButton</code>, <code>Combobox.Dropdown</code>, <code>Combobox.DropdownTarget</code>, <code>Combobox.Empty</code>, <code>Combobox.EventsTarget</code>, <code>Combobox.Footer</code>, <code>Combobox.Group</code>, <code>Combobox.Header</code>, <code>Combobox.HiddenInput</code>, <code>Combobox.Option</code>, <code>Combobox.Options</code>, <code>Combobox.Search</code>, <code>Combobox.Target</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-chevron\"></a>\n### `Combobox.Chevron`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-clearbutton\"></a>\n### `Combobox.ClearButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-dropdown\"></a>\n### `Combobox.Dropdown`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-dropdowntarget\"></a>\n### `Combobox.DropdownTarget`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-empty\"></a>\n### `Combobox.Empty`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-eventstarget\"></a>\n### `Combobox.EventsTarget`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-footer\"></a>\n### `Combobox.Footer`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-group\"></a>\n### `Combobox.Group`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-header\"></a>\n### `Combobox.Header`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-hiddeninput\"></a>\n### `Combobox.HiddenInput`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-option\"></a>\n### `Combobox.Option`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-options\"></a>\n### `Combobox.Options`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-search\"></a>\n### `Combobox.Search`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-combobox-2e-target\"></a>\n### `Combobox.Target`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxchevron\"></a>\n### `ComboboxChevron`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-chevron/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxclearbutton\"></a>\n### `ComboboxClearButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-clear-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxdropdown\"></a>\n### `ComboboxDropdown`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-dropdown/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxdropdowntarget\"></a>\n### `ComboboxDropdownTarget`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-dropdown-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxempty\"></a>\n### `ComboboxEmpty`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-empty/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxeventstarget\"></a>\n### `ComboboxEventsTarget`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-events-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxfooter\"></a>\n### `ComboboxFooter`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-footer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxgroup\"></a>\n### `ComboboxGroup`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxheader\"></a>\n### `ComboboxHeader`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-header/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxhiddeninput\"></a>\n### `ComboboxHiddenInput`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-hidden-input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxoption\"></a>\n### `ComboboxOption`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-option/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxoptions\"></a>\n### `ComboboxOptions`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-options/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxpopover\"></a>\n### `ComboboxPopover`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-popover/)\n- Temporary bind: not available\n- Subcomponents: <code>ComboboxPopover.Target</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxpopover-2e-target\"></a>\n### `ComboboxPopover.Target`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-popover/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxpopovertarget\"></a>\n### `ComboboxPopoverTarget`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-popover-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxsearch\"></a>\n### `ComboboxSearch`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-search/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-comboboxtarget\"></a>\n### `ComboboxTarget`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/combobox-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-container\"></a>\n### `Container`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/container/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>fluid</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the container takes 100% width of its parent and `size` prop is ignored. |\n| <code>strategy</code> | no | <code>\"block\" &#124; \"grid\"</code> | <code>\"block\"</code>, <code>\"grid\"</code> | Centering strategy |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-copybutton\"></a>\n### `CopyButton`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/copy-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>timeout</code> | no | <code>number</code> | — | Copied status timeout in ms |\n\n<a id=\"component-datalist\"></a>\n### `DataList`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/data-list/)\n- Temporary bind: not available\n- Subcomponents: <code>DataList.Item</code>, <code>DataList.ItemLabel</code>, <code>DataList.ItemValue</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; item?: Record&lt;string, any&gt;; itemLabel?: Record&lt;string, any&gt;; itemValue?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>gap</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.spacing` or any valid CSS value to set gap between items |\n| <code>labelWidth</code> | no | <code>Property.MinWidth&lt;string &#124; number&gt;</code> | — | Controls min-width of the label (dt) element, any valid CSS value |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withDivider</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Adds border between items |\n\n<a id=\"component-datalist-2e-item\"></a>\n### `DataList.Item`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/data-list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-datalist-2e-itemlabel\"></a>\n### `DataList.ItemLabel`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/data-list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-datalist-2e-itemvalue\"></a>\n### `DataList.ItemValue`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/data-list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-datalistitem\"></a>\n### `DataListItem`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/data-list-item/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-datalistitemlabel\"></a>\n### `DataListItemLabel`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/data-list-item-label/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-datalistitemvalue\"></a>\n### `DataListItemValue`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/data-list-item-value/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-dialog\"></a>\n### `Dialog`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/dialog/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes the widget layout and focus boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-directionprovider\"></a>\n### `DirectionProvider`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/direction-provider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Replaces a Homarr-owned provider boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-divider\"></a>\n### `Divider`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/divider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Divider label, visible only with `orientation=\"horizontal\"` |\n| <code>labelPosition</code> | no | <code>\"center\" &#124; \"left\" &#124; \"right\"</code> | <code>\"center\"</code>, <code>\"left\"</code>, <code>\"right\"</code> | Label position |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-drawer\"></a>\n### `Drawer`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: <code>Drawer.Body</code>, <code>Drawer.CloseButton</code>, <code>Drawer.Content</code>, <code>Drawer.Header</code>, <code>Drawer.Overlay</code>, <code>Drawer.Root</code>, <code>Drawer.Stack</code>, <code>Drawer.Title</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawer-2e-body\"></a>\n### `Drawer.Body`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawer-2e-closebutton\"></a>\n### `Drawer.CloseButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawer-2e-content\"></a>\n### `Drawer.Content`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawer-2e-header\"></a>\n### `Drawer.Header`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawer-2e-overlay\"></a>\n### `Drawer.Overlay`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawer-2e-root\"></a>\n### `Drawer.Root`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawer-2e-stack\"></a>\n### `Drawer.Stack`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawer-2e-title\"></a>\n### `Drawer.Title`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawerbody\"></a>\n### `DrawerBody`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer-body/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawerclosebutton\"></a>\n### `DrawerCloseButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer-close-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawercontent\"></a>\n### `DrawerContent`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer-content/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawerheader\"></a>\n### `DrawerHeader`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer-header/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-draweroverlay\"></a>\n### `DrawerOverlay`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer-overlay/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawerroot\"></a>\n### `DrawerRoot`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer-root/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawerstack\"></a>\n### `DrawerStack`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer-stack/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-drawertitle\"></a>\n### `DrawerTitle`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/drawer-title/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-emptystate\"></a>\n### `EmptyState`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state/)\n- Temporary bind: not available\n- Subcomponents: <code>EmptyState.Actions</code>, <code>EmptyState.Description</code>, <code>EmptyState.Indicator</code>, <code>EmptyState.Title</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; title?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; description?: Record&lt;string, any&gt;; indicator?: Record&lt;...&gt;; actions?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Description content, rendered inside `EmptyState.Description` |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Icon or illustration, rendered inside `EmptyState.Indicator` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withIndicatorBackground</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, a neutral circular background is displayed behind the indicator. Setting `variant` always displays a colored background regardless of this prop |\n\n<a id=\"component-emptystate-2e-actions\"></a>\n### `EmptyState.Actions`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-emptystate-2e-description\"></a>\n### `EmptyState.Description`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-emptystate-2e-indicator\"></a>\n### `EmptyState.Indicator`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-emptystate-2e-title\"></a>\n### `EmptyState.Title`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-emptystateactions\"></a>\n### `EmptyStateActions`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state-actions/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-emptystatedescription\"></a>\n### `EmptyStateDescription`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state-description/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-emptystateindicator\"></a>\n### `EmptyStateIndicator`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state-indicator/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-emptystatetitle\"></a>\n### `EmptyStateTitle`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/empty-state-title/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-fieldset\"></a>\n### `Fieldset`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/fieldset/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>legend</code> | no | <code>React.ReactNode</code> | — | Fieldset legend |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-filebutton\"></a>\n### `FileButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/file-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Requests local file-system access.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-fileinput\"></a>\n### `FileInput`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/file-input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Requests local file-system access.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-flattreenode\"></a>\n### `FlatTreeNode`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/flat-tree-node/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>checkOnSpace</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree node is checked on space key press |\n| <code>expandOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree node with children is expanded on click |\n| <code>expandOnSpace</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree node with children is expanded on space key press |\n| <code>expanded</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Whether the node is expanded |\n| <code>hasChildren</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Whether the node has children |\n| <code>level</code> | yes | <code>number</code> | — | Nesting level of the node, starts at 1 |\n| <code>linesPath</code> | no | <code>FlatTreeLineState[]</code> | — | Line state per ancestor + own level, computed by `flattenTreeData`. When provided and the tree root has `data-with-lines`, connector lines are rendered. |\n| <code>node</code> | yes | <code>TreeNodeData</code> | — | Node data from tree data |\n| <code>parent</code> | yes | <code>null &#124; string</code> | — | Value of the parent node, `null` for root nodes |\n| <code>selectOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree node is selected on click |\n| <code>tree</code> | yes | <code>UseTreeReturnType</code> | — | Tree controller instance, return value of `useTree` hook |\n\n<a id=\"component-flex\"></a>\n### `Flex`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/flex/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>columnGap</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | `column-gap` CSS property |\n| <code>gap</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | `gap` CSS property |\n| <code>justify</code> | no | <code>StyleProp&lt;Property.JustifyContent&gt;</code> | <code>\"-moz-initial\"</code>, <code>\"center\"</code>, <code>\"end\"</code>, <code>\"flex-end\"</code>, <code>\"flex-start\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"left\"</code>, <code>\"normal\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"right\"</code>, <code>\"space-around\"</code>, <code>\"space-between\"</code>, <code>\"space-evenly\"</code>, <code>\"start\"</code>, <code>\"stretch\"</code>, <code>\"unset\"</code> | `justify-content` CSS property |\n| <code>rowGap</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | `row-gap` CSS property |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-floatingarrow\"></a>\n### `FloatingArrow`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/floating-arrow/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>arrowOffset</code> | yes | <code>number</code> | — | — |\n| <code>arrowPosition</code> | yes | <code>\"center\" &#124; \"side\" &#124; \"merge\"</code> | <code>\"center\"</code>, <code>\"merge\"</code>, <code>\"side\"</code> | — |\n| <code>arrowRadius</code> | yes | <code>number</code> | — | — |\n| <code>arrowSize</code> | yes | <code>number</code> | — | — |\n| <code>arrowX</code> | no | <code>number</code> | — | — |\n| <code>arrowY</code> | no | <code>number</code> | — | — |\n| <code>position</code> | yes | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | — |\n| <code>visible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-floatingindicator\"></a>\n### `FloatingIndicator`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/floating-indicator/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>displayAfterTransitionEnd</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controls whether the indicator should be hidden initially and displayed after the parent's transition ends. Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent the indicator from appearing at the wrong position during the parent's animation. |\n| <code>parent</code> | no | <code>HTMLElement &#124; null</code> | — | Parent container element that must have `position: relative`. The indicator's position is calculated relative to this element. |\n| <code>transitionDuration</code> | no | <code>string &#124; number</code> | — | Transition duration in ms |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-floatingwindow\"></a>\n### `FloatingWindow`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/floating-window/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Creates a separate browser window.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-focustrap\"></a>\n### `FocusTrap`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/focus-trap/)\n- Temporary bind: not available\n- Subcomponents: <code>FocusTrap.InitialFocus</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Can capture focus outside the widget interaction flow.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-focustrap-2e-initialfocus\"></a>\n### `FocusTrap.InitialFocus`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/focus-trap/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Can capture focus outside the widget interaction flow.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-focustrapinitialfocus\"></a>\n### `FocusTrapInitialFocus`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/focus-trap-initial-focus/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Can capture focus outside the widget interaction flow.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-grid\"></a>\n### `Grid`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/grid/)\n- Temporary bind: not available\n- Subcomponents: <code>Grid.Col</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ col?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; inner?: Record&lt;string, any&gt;; container?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>breakpoints</code> | no | <code>GridBreakpoints</code> | — | Breakpoints values, only used with `type=\"container\"` |\n| <code>columnGap</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Column gap, overrides `gap` for horizontal spacing |\n| <code>columns</code> | no | <code>number</code> | — | Number of columns in each row |\n| <code>gap</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Gap between columns and rows, key of `theme.spacing` or any valid CSS value |\n| <code>grow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, columns in the last row expand to fill all available space |\n| <code>justify</code> | no | <code>Property.JustifyContent</code> | <code>\"-moz-initial\"</code>, <code>\"center\"</code>, <code>\"end\"</code>, <code>\"flex-end\"</code>, <code>\"flex-start\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"left\"</code>, <code>\"normal\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"right\"</code>, <code>\"space-around\"</code>, <code>\"space-between\"</code>, <code>\"space-evenly\"</code>, <code>\"start\"</code>, <code>\"stretch\"</code>, <code>\"unset\"</code> | Sets `justify-content` |\n| <code>rowGap</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Row gap, overrides `gap` for vertical spacing |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-grid-2e-col\"></a>\n### `Grid.Col`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/grid/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>span</code> | no | <code>StyleProp&lt;ColSpan&gt;</code> | <code>\"auto\"</code>, <code>\"content\"</code> | Column span |\n\n<a id=\"component-gridcol\"></a>\n### `GridCol`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/grid-col/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>span</code> | no | <code>StyleProp&lt;ColSpan&gt;</code> | <code>\"auto\"</code>, <code>\"content\"</code> | Column span |\n\n<a id=\"component-group\"></a>\n### `Group`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>gap</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem |\n| <code>grow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether each child element should have `flex-grow: 1` style |\n| <code>justify</code> | no | <code>Property.JustifyContent</code> | <code>\"-moz-initial\"</code>, <code>\"center\"</code>, <code>\"end\"</code>, <code>\"flex-end\"</code>, <code>\"flex-start\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"left\"</code>, <code>\"normal\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"right\"</code>, <code>\"space-around\"</code>, <code>\"space-between\"</code>, <code>\"space-evenly\"</code>, <code>\"start\"</code>, <code>\"stretch\"</code>, <code>\"unset\"</code> | Controls `justify-content` CSS property |\n| <code>preventGrowOverflow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children) |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-headlessmantineprovider\"></a>\n### `HeadlessMantineProvider`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/headless-mantine-provider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Replaces a Homarr-owned provider boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-highlight\"></a>\n### `Highlight`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/highlight/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>accentInsensitive</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Perform accent-insensitive matching. When enabled cafe will match cafe, café, cafè, etc. |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>caseInsensitive</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Perform case-insensitive matching. |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient configuration, ignored when `variant` is not `gradient` |\n| <code>highlight</code> | yes | <code>string &#124; string[] &#124; HighlightTerm[]</code> | — | Substring(s) to highlight in `children`. Can be: - string: single term - string[]: multiple terms with same color - HighlightTerm[]: multiple terms with custom colors per term - Matching is case-insensitive and accent-insensitive by default, use `caseInsensitive` and `accentInsensitive` props to control this behavior - Regex special characters are automatically escaped - When multiple substrings are provided, longer matches take precedence - Empty strings and whitespace-only strings are ignored |\n| <code>inherit</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether font properties should be inherited from the parent |\n| <code>inline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Sets `line-height` to 1 for centering |\n| <code>lineClamp</code> | no | <code>number</code> | — | Number of lines after which Text will be truncated |\n| <code>span</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Shorthand for `component=\"span\"` |\n| <code>textWrap</code> | no | <code>\"wrap\" &#124; \"nowrap\" &#124; \"balance\" &#124; \"pretty\" &#124; \"stable\"</code> | <code>\"balance\"</code>, <code>\"nowrap\"</code>, <code>\"pretty\"</code>, <code>\"stable\"</code>, <code>\"wrap\"</code> | Controls `text-wrap` CSS property |\n| <code>truncate</code> | no | <code>false &#124; true &#124; \"end\" &#124; \"start\"</code> | <code>\"end\"</code>, <code>false</code>, <code>\"start\"</code>, <code>true</code> | Side on which Text must be truncated, if `true`, text is truncated from the start |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>wholeWord</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Only match whole words (adds word boundaries to regex). When enabled, 'the' will not match 'there'. |\n\n<a id=\"component-hovercard\"></a>\n### `HoverCard`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/hover-card/)\n- Temporary bind: not available\n- Subcomponents: <code>HoverCard.Dropdown</code>, <code>HoverCard.Group</code>, <code>HoverCard.Target</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>arrowOffset</code> | no | <code>number</code> | — | Arrow offset in px |\n| <code>arrowPosition</code> | no | <code>\"center\" &#124; \"side\" &#124; \"merge\"</code> | <code>\"center\"</code>, <code>\"merge\"</code>, <code>\"side\"</code> | Arrow position |\n| <code>arrowRadius</code> | no | <code>number</code> | — | Arrow `border-radius` in px |\n| <code>arrowSize</code> | no | <code>number</code> | — | Arrow size in px |\n| <code>attributes</code> | no | <code>{ dropdown?: Record&lt;string, any&gt;; overlay?: Record&lt;string, any&gt;; arrow?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>clickOutsideEvents</code> | no | <code>string[]</code> | — | Events that trigger outside clicks |\n| <code>closeDelay</code> | no | <code>number</code> | — | Delay in ms before the dropdown closes after mouse leaves the target or dropdown. Overridden by HoverCard.Group delay if used within a group. |\n| <code>closeOnClickOutside</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dropdown should be closed on outside clicks |\n| <code>closeOnEscape</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dropdown should be closed when `Escape` key is pressed |\n| <code>defaultOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Initial opened state for uncontrolled component |\n| <code>floatingStrategy</code> | no | <code>\"fixed\" &#124; \"absolute\"</code> | <code>\"absolute\"</code>, <code>\"fixed\"</code> | Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) |\n| <code>hideDetached</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen |\n| <code>initiallyOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Initial opened state |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. |\n| <code>keepMountedMode</code> | no | <code>\"activity\" &#124; \"display-none\"</code> | <code>\"activity\"</code>, <code>\"display-none\"</code> | Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles |\n| <code>middlewares</code> | no | <code>PopoverMiddlewares</code> | — | Floating ui middlewares to configure position handling |\n| <code>openDelay</code> | no | <code>number</code> | — | Delay in ms before the dropdown opens after mouse enters the target. Overridden by HoverCard.Group delay if used within a group. |\n| <code>overlayProps</code> | no | <code>(OverlayProps &amp; ElementProps&lt;\"div\"&gt;)</code> | — | Props passed down to `Overlay` component |\n| <code>position</code> | no | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Dropdown position relative to the target element |\n| <code>preventPositionChangeWhenVisible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. |\n| <code>returnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether focus should be automatically returned to control when dropdown closes |\n| <code>transitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to the `Transition` component. Use to configure duration and animation type. |\n| <code>trapFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether focus should be trapped within dropdown |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withArrow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether component should have an arrow |\n| <code>withOverlay</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the overlay should be displayed when the dropdown is opened |\n| <code>withRoles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dropdown and target elements should have accessible roles |\n\n<a id=\"component-hovercard-2e-dropdown\"></a>\n### `HoverCard.Dropdown`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/hover-card/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-hovercard-2e-group\"></a>\n### `HoverCard.Group`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/hover-card/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>closeDelay</code> | no | <code>number</code> | — | Close delay in ms |\n| <code>openDelay</code> | no | <code>number</code> | — | Open delay in ms |\n\n<a id=\"component-hovercard-2e-target\"></a>\n### `HoverCard.Target`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/hover-card/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>eventPropsWrapperName</code> | no | <code>string</code> | — | Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`. |\n| <code>popupType</code> | no | <code>string</code> | — | Popup accessible type |\n\n<a id=\"component-hovercarddropdown\"></a>\n### `HoverCardDropdown`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/hover-card-dropdown/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-hovercardgroup\"></a>\n### `HoverCardGroup`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/hover-card-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>closeDelay</code> | no | <code>number</code> | — | Close delay in ms |\n| <code>openDelay</code> | no | <code>number</code> | — | Open delay in ms |\n\n<a id=\"component-hovercardtarget\"></a>\n### `HoverCardTarget`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/hover-card-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>eventPropsWrapperName</code> | no | <code>string</code> | — | Name of the prop to wrap event listeners in. Use when the target component expects event listeners in a nested object. For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`. |\n| <code>popupType</code> | no | <code>string</code> | — | Popup accessible type |\n\n<a id=\"component-hueslider\"></a>\n### `HueSlider`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/hue-slider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ slider?: Record&lt;string, any&gt;; sliderOverlay?: Record&lt;string, any&gt;; thumb?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-image\"></a>\n### `Image`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/image/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>fallbackSrc</code> | no | <code>string</code> | — | Image url used as a fallback if the image cannot be loaded |\n| <code>fit</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"contain\" &#124; \"cover\" &#124; \"fill\" &#124; \"scale-down\"</code> | <code>\"-moz-initial\"</code>, <code>\"contain\"</code>, <code>\"cover\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"scale-down\"</code>, <code>\"unset\"</code> | Controls `object-fit` style |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-indicator\"></a>\n### `Indicator`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/indicator/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; indicator?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color |\n| <code>inline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Changes container display from block to inline-block, use when wrapping elements with fixed width |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Label displayed inside the indicator, for example, notification count |\n| <code>maxValue</code> | no | <code>number</code> | — | Maximum value to display. If label is a number greater than this value, it will be displayed as `{maxValue}+` |\n| <code>position</code> | no | <code>\"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\" &#124; \"bottom-center\" &#124; \"top-center\" &#124; \"middle-center\" &#124; \"middle-end\" &#124; \"middle-start\"</code> | <code>\"bottom-center\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"middle-center\"</code>, <code>\"middle-end\"</code>, <code>\"middle-start\"</code>, <code>\"top-center\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Indicator position relative to the target element |\n| <code>processing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the indicator has processing animation |\n| <code>showZero</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether indicator with label `0` should be displayed |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-inlinestyles\"></a>\n### `InlineStyles`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/inline-styles/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Writes unscoped style rules.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-input\"></a>\n### `Input`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input/)\n- Temporary bind: not available\n- Subcomponents: <code>Input.ClearButton</code>, <code>Input.Description</code>, <code>Input.Error</code>, <code>Input.Label</code>, <code>Input.Placeholder</code>, <code>Input.Success</code>, <code>Input.Wrapper</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-input-2e-clearbutton\"></a>\n### `Input.ClearButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-input-2e-description\"></a>\n### `Input.Description`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-input-2e-error\"></a>\n### `Input.Error`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-input-2e-label\"></a>\n### `Input.Label`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-input-2e-placeholder\"></a>\n### `Input.Placeholder`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-input-2e-success\"></a>\n### `Input.Success`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-input-2e-wrapper\"></a>\n### `Input.Wrapper`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputbase\"></a>\n### `InputBase`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-base/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputclearbutton\"></a>\n### `InputClearButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-clear-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputclearsection\"></a>\n### `InputClearSection`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-clear-section/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputdescription\"></a>\n### `InputDescription`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-description/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputerror\"></a>\n### `InputError`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-error/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputlabel\"></a>\n### `InputLabel`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-label/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputplaceholder\"></a>\n### `InputPlaceholder`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-placeholder/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputsuccess\"></a>\n### `InputSuccess`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-success/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inputwrapper\"></a>\n### `InputWrapper`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/input-wrapper/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-jsoninput\"></a>\n### `JsonInput`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/json-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 5 more ...; bottomSection?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autosize</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, enables textarea height growing with its content |\n| <code>bottomSection</code> | no | <code>React.ReactNode</code> | — | Content rendered at the bottom of the input, inside the border |\n| <code>bottomSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `bottomSection` element |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>formatOnBlur</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the value should be formatted on blur |\n| <code>indentSpaces</code> | no | <code>number</code> | — | Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function. |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxRows</code> | no | <code>number</code> | — | Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set |\n| <code>minRows</code> | no | <code>number</code> | — | Minimum rows of autosize textarea, ignored if `autosize` prop is not set |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>resize</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"block\" &#124; \"inline\" &#124; \"both\" &#124; \"horizontal\" &#124; \"vertical\"</code> | <code>\"-moz-initial\"</code>, <code>\"block\"</code>, <code>\"both\"</code>, <code>\"horizontal\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"inline\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code>, <code>\"vertical\"</code> | Controls `resize` CSS property |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>validationError</code> | no | <code>React.ReactNode</code> | — | Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails. |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-kbd\"></a>\n### `Kbd`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/kbd/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-list\"></a>\n### `List`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/list/)\n- Temporary bind: not available\n- Subcomponents: <code>List.Item</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; item?: Record&lt;string, any&gt;; itemLabel?: Record&lt;string, any&gt;; itemWrapper?: Record&lt;string, any&gt;; itemIcon?: Record&lt;...&gt;; }</code> | — | — |\n| <code>center</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Vertically centers list items with their icons |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Icon to replace default list markers. Applied to all items unless overridden on individual List.Item components |\n| <code>listStyleType</code> | no | <code>Property.ListStyleType</code> | <code>\"-moz-initial\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code> | Controls CSS `list-style-type` property. Overrides the default list marker style based on list type |\n| <code>reversed</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Reverses the order of list items (only works with type=\"ordered\") |\n| <code>start</code> | no | <code>number</code> | — | Starting value for ordered list numbering (only works with type=\"ordered\") |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withPadding</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Adds extra horizontal padding to the list, useful for nested lists |\n\n<a id=\"component-list-2e-item\"></a>\n### `List.Item`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Icon to replace item bullet |\n\n<a id=\"component-listitem\"></a>\n### `ListItem`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/list-item/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Icon to replace item bullet |\n\n<a id=\"component-loader\"></a>\n### `Loader`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/loader/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>loaders</code> | no | <code>Partial&lt;Record&lt;(string &amp; {}) &#124; \"bars\" &#124; \"dots\" &#124; \"oval\", MantineLoaderComponent&gt;&gt;</code> | — | Object of loaders components, can be customized via default props or inline. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-loadingoverlay\"></a>\n### `LoadingOverlay`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/loading-overlay/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; loader?: Record&lt;string, any&gt;; overlay?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>loaderProps</code> | no | <code>LoaderProps</code> | — | Props passed down to `Loader` component |\n| <code>overlayProps</code> | no | <code>OverlayProps</code> | — | Props passed down to `Overlay` component. Use to customizing blur, opacity, color and other properties. |\n| <code>transitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to `Transition` component. Set `duration` to create custom transition or override default transition. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>visible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controls overlay visibility. Typically used with state (useState, useDisclosure). |\n\n<a id=\"component-mantineprovider\"></a>\n### `MantineProvider`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/mantine-provider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Replaces a Homarr-owned provider boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-mantinethemeprovider\"></a>\n### `MantineThemeProvider`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/mantine-theme-provider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Replaces a Homarr-owned provider boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-mark\"></a>\n### `Mark`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/mark/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-marquee\"></a>\n### `Marquee`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/marquee/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ content?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>duration</code> | no | <code>number</code> | — | Animation duration in ms |\n| <code>fadeEdgeColor</code> | no | <code>string</code> | — | Color of the fade gradient, |\n| <code>fadeEdgeSize</code> | no | <code>string</code> | — | Size of the fade gradient, |\n| <code>fadeEdges</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Whether to show gradient fade on edges, |\n| <code>gap</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Gap between repeated children, key of `theme.spacing` or any valid CSS value |\n| <code>pauseOnHover</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Pauses animation on hover |\n| <code>repeat</code> | no | <code>number</code> | — | Number of times children are repeated inline for seamless scrolling |\n| <code>reverse</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Reverses animation direction |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-maskinput\"></a>\n### `MaskInput`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/mask-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>alwaysShowMask</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Show mask pattern even when field is empty and unfocused |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 5 more ...; bottomSection?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoClear</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Clear value on blur when mask is incomplete, `false` by default |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>separate</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When true, raw and display values are decoupled |\n| <code>showMaskOnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Show mask placeholder on focus, `true` by default |\n| <code>slotChar</code> | no | <code>null &#124; string</code> | — | Character displayed in unfilled slots, `\"_\"` by default |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>tokens</code> | no | <code>Record&lt;string, RegExp&gt;</code> | — | Override or extend the default token map |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-menu\"></a>\n### `Menu`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: `boolean` via `defaultChecked`; read from `inputs.<bindName>`\n- Subcomponents: <code>Menu.CheckboxGroup</code>, <code>Menu.CheckboxItem</code>, <code>Menu.ContextMenu</code>, <code>Menu.Divider</code>, <code>Menu.Dropdown</code>, <code>Menu.Item</code>, <code>Menu.Label</code>, <code>Menu.RadioGroup</code>, <code>Menu.RadioItem</code>, <code>Menu.Search</code>, <code>Menu.Sub</code>, <code>Menu.Target</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>alignItemsLabels</code> | no | <code>\"none\" &#124; \"all\" &#124; \"with-indicators\"</code> | <code>\"all\"</code>, <code>\"none\"</code>, <code>\"with-indicators\"</code> | Controls how indicator slot space is reserved on menu items for label alignment. `'all'` reserves space on every `Menu.Item`, `'with-indicators'` reserves space only on `Menu.CheckboxItem` and `Menu.RadioItem`, `'none'` reserves space only on items that currently display an indicator. |\n| <code>arrowOffset</code> | no | <code>number</code> | — | Arrow offset in px |\n| <code>arrowPosition</code> | no | <code>\"center\" &#124; \"side\" &#124; \"merge\"</code> | <code>\"center\"</code>, <code>\"merge\"</code>, <code>\"side\"</code> | Arrow position |\n| <code>arrowRadius</code> | no | <code>number</code> | — | Arrow `border-radius` in px |\n| <code>arrowSize</code> | no | <code>number</code> | — | Arrow size in px |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; search?: Record&lt;string, any&gt;; item?: Record&lt;string, any&gt;; chevron?: Record&lt;string, any&gt;; ... 6 more ...; divider?: Record&lt;...&gt;; }</code> | — | — |\n| <code>checkIcon</code> | no | <code>React.ReactNode</code> | — | Custom icon rendered as the indicator of checked `Menu.CheckboxItem` and selected `Menu.RadioItem`. Can be overridden per item with the `checkIcon` prop. |\n| <code>clickOutsideEvents</code> | no | <code>string[]</code> | — | Events that trigger outside click detection. Includes mousedown for desktop clicks, touchstart for mobile, and keydown for Escape key handling |\n| <code>closeDelay</code> | no | <code>number</code> | — | Close delay in ms, applicable only to `trigger=\"hover\"` variant |\n| <code>closeOnClickOutside</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is closed on outside clicks |\n| <code>closeOnEscape</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is closed when the `Escape` key is pressed |\n| <code>closeOnItemClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the Menu is closed when one of the items is clicked. Can be overridden per item with `closeMenuOnClick` prop |\n| <code>defaultOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled menu initial opened state |\n| <code>floatingStrategy</code> | no | <code>\"fixed\" &#124; \"absolute\"</code> | <code>\"absolute\"</code>, <code>\"fixed\"</code> | Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) |\n| <code>hideDetached</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. |\n| <code>keepMountedMode</code> | no | <code>\"activity\" &#124; \"display-none\"</code> | <code>\"activity\"</code>, <code>\"display-none\"</code> | Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles |\n| <code>loop</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, arrow key presses wrap around from last item to first and vice versa |\n| <code>menuItemTabIndex</code> | no | <code>0 &#124; -1</code> | <code>-1</code>, <code>0</code> | Set the `tabindex` on all menu items. Use `0` to allow Tab key navigation through menu items (required for navigation menus following WAI-ARIA disclosure pattern). |\n| <code>middlewares</code> | no | <code>PopoverMiddlewares</code> | — | Floating ui middlewares to configure position handling |\n| <code>openDelay</code> | no | <code>number</code> | — | Open delay in ms, applicable only to `trigger=\"hover\"` variant |\n| <code>opened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled menu opened state |\n| <code>overlayProps</code> | no | <code>(OverlayProps &amp; ElementProps&lt;\"div\"&gt;)</code> | — | Props passed down to `Overlay` component |\n| <code>position</code> | no | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Dropdown position relative to the target element |\n| <code>preventPositionChangeWhenVisible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. |\n| <code>returnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether focus should be automatically returned to control when dropdown closes |\n| <code>transitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to the `Transition` component. Use to configure duration and animation type. |\n| <code>trapFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, focus is trapped within the menu dropdown when it is opened |\n| <code>trigger</code> | no | <code>\"hover\" &#124; \"click\" &#124; \"click-hover\"</code> | <code>\"click\"</code>, <code>\"click-hover\"</code>, <code>\"hover\"</code> | Event trigger to open menu. Note: 'hover' is not keyboard accessible; prefer 'click-hover' for accessible hover menus |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withArrow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether component should have an arrow |\n| <code>withInitialFocusPlaceholder</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Adds a hidden focusable element at the start of the dropdown to prevent unexpected focus jumps when opening with keyboard. Set to false if you need custom focus management. |\n| <code>withOverlay</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the overlay should be displayed when the dropdown is opened |\n\n<a id=\"component-menu-2e-checkboxgroup\"></a>\n### `Menu.CheckboxGroup`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menu-2e-checkboxitem\"></a>\n### `Menu.CheckboxItem`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>checkIcon</code> | no | <code>React.ReactNode</code> | — | Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`. |\n| <code>closeMenuOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu. |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the end of the label |\n\n<a id=\"component-menu-2e-contextmenu\"></a>\n### `Menu.ContextMenu`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>longPressDelay</code> | no | <code>number</code> | — | Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default |\n\n<a id=\"component-menu-2e-divider\"></a>\n### `Menu.Divider`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menu-2e-dropdown\"></a>\n### `Menu.Dropdown`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menu-2e-item\"></a>\n### `Menu.Item`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>closeMenuOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's `closeOnItemClick` prop. When true or false, overrides the Menu-level setting |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the start of the label |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the end of the label |\n\n<a id=\"component-menu-2e-label\"></a>\n### `Menu.Label`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menu-2e-radiogroup\"></a>\n### `Menu.RadioGroup`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menu-2e-radioitem\"></a>\n### `Menu.RadioItem`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>checkIcon</code> | no | <code>React.ReactNode</code> | — | Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`. |\n| <code>closeMenuOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, closes the menu when this item is clicked. By default, radio items do not close the menu. |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the end of the label |\n\n<a id=\"component-menu-2e-search\"></a>\n### `Menu.Search`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; wrapper?: Record&lt;string, any&gt;; bottomSection?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>clearSearchOnClose</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair. |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Determines whether the input should have error styles and `aria-invalid` attribute |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>multiline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Determines whether the input should have success styles |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAria</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element of the `Input` component |\n\n<a id=\"component-menu-2e-sub\"></a>\n### `Menu.Sub`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>arrowOffset</code> | no | <code>number</code> | — | Arrow offset in px |\n| <code>arrowPosition</code> | no | <code>\"center\" &#124; \"side\" &#124; \"merge\"</code> | <code>\"center\"</code>, <code>\"merge\"</code>, <code>\"side\"</code> | Arrow position |\n| <code>arrowRadius</code> | no | <code>number</code> | — | Arrow `border-radius` in px |\n| <code>arrowSize</code> | no | <code>number</code> | — | Arrow size in px |\n| <code>closeDelay</code> | no | <code>number</code> | — | Close delay in ms, applicable when hover trigger is used |\n| <code>floatingStrategy</code> | no | <code>\"fixed\" &#124; \"absolute\"</code> | <code>\"absolute\"</code>, <code>\"fixed\"</code> | Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) |\n| <code>hideDetached</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. |\n| <code>keepMountedMode</code> | no | <code>\"activity\" &#124; \"display-none\"</code> | <code>\"activity\"</code>, <code>\"display-none\"</code> | Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles |\n| <code>middlewares</code> | no | <code>PopoverMiddlewares</code> | — | Floating ui middlewares to configure position handling |\n| <code>openDelay</code> | no | <code>number</code> | — | Open delay in ms, applicable when hover trigger is used |\n| <code>opened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled opened state |\n| <code>overlayProps</code> | no | <code>(OverlayProps &amp; ElementProps&lt;\"div\"&gt;)</code> | — | Props passed down to `Overlay` component |\n| <code>position</code> | no | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Dropdown position relative to the target element |\n| <code>preventPositionChangeWhenVisible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. |\n| <code>returnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether focus should be automatically returned to control when dropdown closes |\n| <code>safeAreaPolygon</code> | no | <code>boolean &#124; SafePolygonOptions</code> | — | Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. |\n| <code>transitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type |\n| <code>withArrow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether component should have an arrow |\n| <code>withOverlay</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the overlay should be displayed when the dropdown is opened |\n\n<a id=\"component-menu-2e-target\"></a>\n### `Menu.Target`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menucheckboxgroup\"></a>\n### `MenuCheckboxGroup`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-checkbox-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menucheckboxitem\"></a>\n### `MenuCheckboxItem`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-checkbox-item/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>checkIcon</code> | no | <code>React.ReactNode</code> | — | Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`. |\n| <code>closeMenuOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu. |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the end of the label |\n\n<a id=\"component-menucontextmenu\"></a>\n### `MenuContextMenu`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-context-menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>longPressDelay</code> | no | <code>number</code> | — | Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default |\n\n<a id=\"component-menudivider\"></a>\n### `MenuDivider`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-divider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menudropdown\"></a>\n### `MenuDropdown`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-dropdown/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menuitem\"></a>\n### `MenuItem`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-item/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>closeMenuOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controls whether the menu closes when this item is clicked. When undefined, inherits from Menu's `closeOnItemClick` prop. When true or false, overrides the Menu-level setting |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the start of the label |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the end of the label |\n\n<a id=\"component-menulabel\"></a>\n### `MenuLabel`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-label/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menuradiogroup\"></a>\n### `MenuRadioGroup`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-radio-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menuradioitem\"></a>\n### `MenuRadioItem`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-radio-item/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>checkIcon</code> | no | <code>React.ReactNode</code> | — | Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`. |\n| <code>closeMenuOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, closes the menu when this item is clicked. By default, radio items do not close the menu. |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the end of the label |\n\n<a id=\"component-menusearch\"></a>\n### `MenuSearch`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-search/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; wrapper?: Record&lt;string, any&gt;; bottomSection?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>clearSearchOnClose</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair. |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Determines whether the input should have error styles and `aria-invalid` attribute |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>multiline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Determines whether the input should have success styles |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAria</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element of the `Input` component |\n\n<a id=\"component-menusub\"></a>\n### `MenuSub`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-sub/)\n- Temporary bind: not available\n- Subcomponents: <code>MenuSub.Dropdown</code>, <code>MenuSub.Item</code>, <code>MenuSub.Target</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>arrowOffset</code> | no | <code>number</code> | — | Arrow offset in px |\n| <code>arrowPosition</code> | no | <code>\"center\" &#124; \"side\" &#124; \"merge\"</code> | <code>\"center\"</code>, <code>\"merge\"</code>, <code>\"side\"</code> | Arrow position |\n| <code>arrowRadius</code> | no | <code>number</code> | — | Arrow `border-radius` in px |\n| <code>arrowSize</code> | no | <code>number</code> | — | Arrow size in px |\n| <code>closeDelay</code> | no | <code>number</code> | — | Close delay in ms, applicable when hover trigger is used |\n| <code>floatingStrategy</code> | no | <code>\"fixed\" &#124; \"absolute\"</code> | <code>\"absolute\"</code>, <code>\"fixed\"</code> | Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) |\n| <code>hideDetached</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. |\n| <code>keepMountedMode</code> | no | <code>\"activity\" &#124; \"display-none\"</code> | <code>\"activity\"</code>, <code>\"display-none\"</code> | Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles |\n| <code>middlewares</code> | no | <code>PopoverMiddlewares</code> | — | Floating ui middlewares to configure position handling |\n| <code>openDelay</code> | no | <code>number</code> | — | Open delay in ms, applicable when hover trigger is used |\n| <code>opened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled opened state |\n| <code>overlayProps</code> | no | <code>(OverlayProps &amp; ElementProps&lt;\"div\"&gt;)</code> | — | Props passed down to `Overlay` component |\n| <code>position</code> | no | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Dropdown position relative to the target element |\n| <code>preventPositionChangeWhenVisible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. |\n| <code>returnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether focus should be automatically returned to control when dropdown closes |\n| <code>safeAreaPolygon</code> | no | <code>boolean &#124; SafePolygonOptions</code> | — | Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. |\n| <code>transitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type |\n| <code>withArrow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether component should have an arrow |\n| <code>withOverlay</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the overlay should be displayed when the dropdown is opened |\n\n<a id=\"component-menusub-2e-dropdown\"></a>\n### `MenuSub.Dropdown`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-sub/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menusub-2e-item\"></a>\n### `MenuSub.Item`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-sub/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>closeMenuOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the start of the label |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the end of the label |\n\n<a id=\"component-menusub-2e-target\"></a>\n### `MenuSub.Target`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-sub/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menusubdropdown\"></a>\n### `MenuSubDropdown`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-sub-dropdown/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menusubitem\"></a>\n### `MenuSubItem`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-sub-item/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>closeMenuOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. |\n| <code>data-disabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the start of the label |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed at the end of the label |\n\n<a id=\"component-menusubtarget\"></a>\n### `MenuSubTarget`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-sub-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menutarget\"></a>\n### `MenuTarget`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/menu-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-menubar\"></a>\n### `Menubar`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/menubar/)\n- Temporary bind: not available\n- Subcomponents: <code>Menubar.Dropdown</code>, <code>Menubar.Menu</code>, <code>Menubar.Target</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-menubar-2e-dropdown\"></a>\n### `Menubar.Dropdown`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/menubar/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-menubar-2e-menu\"></a>\n### `Menubar.Menu`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/menubar/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-menubar-2e-target\"></a>\n### `Menubar.Target`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/menubar/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-menubardropdown\"></a>\n### `MenubarDropdown`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/menubar-dropdown/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-menubarmenu\"></a>\n### `MenubarMenu`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/menubar-menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-menubartarget\"></a>\n### `MenubarTarget`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/menubar-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal\"></a>\n### `Modal`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: <code>Modal.Body</code>, <code>Modal.CloseButton</code>, <code>Modal.Content</code>, <code>Modal.Header</code>, <code>Modal.Overlay</code>, <code>Modal.Root</code>, <code>Modal.Stack</code>, <code>Modal.Title</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal-2e-body\"></a>\n### `Modal.Body`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal-2e-closebutton\"></a>\n### `Modal.CloseButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal-2e-content\"></a>\n### `Modal.Content`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal-2e-header\"></a>\n### `Modal.Header`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal-2e-overlay\"></a>\n### `Modal.Overlay`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal-2e-root\"></a>\n### `Modal.Root`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal-2e-stack\"></a>\n### `Modal.Stack`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modal-2e-title\"></a>\n### `Modal.Title`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalbase\"></a>\n### `ModalBase`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-base/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalbasebody\"></a>\n### `ModalBaseBody`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-base-body/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalbaseclosebutton\"></a>\n### `ModalBaseCloseButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-base-close-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalbasecontent\"></a>\n### `ModalBaseContent`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-base-content/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalbaseheader\"></a>\n### `ModalBaseHeader`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-base-header/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalbaseoverlay\"></a>\n### `ModalBaseOverlay`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-base-overlay/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalbasetitle\"></a>\n### `ModalBaseTitle`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-base-title/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalbody\"></a>\n### `ModalBody`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-body/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalclosebutton\"></a>\n### `ModalCloseButton`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-close-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalcontent\"></a>\n### `ModalContent`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-content/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalheader\"></a>\n### `ModalHeader`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-header/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modaloverlay\"></a>\n### `ModalOverlay`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-overlay/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalroot\"></a>\n### `ModalRoot`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-root/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modalstack\"></a>\n### `ModalStack`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-stack/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-modaltitle\"></a>\n### `ModalTitle`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/modal-title/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Escapes or replaces the widget layout, focus, scrolling, or overlay boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-multiselect\"></a>\n### `MultiSelect`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/multi-select/)\n- Temporary bind: `string[]` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; option?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; ... 14 more ...; inputField?: Record&lt;...&gt;; }</code> | — | — |\n| <code>checkIconPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the checkmark icon shown next to selected options in the dropdown |\n| <code>chevronColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of the default chevron |\n| <code>clearButtonProps</code> | no | <code>InputClearButtonProps</code> | — | Props passed down to the clear button |\n| <code>clearSearchOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Clear search value when item is selected |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) |\n| <code>comboboxProps</code> | no | <code>ComboboxProps</code> | — | Props passed down to `Combobox` component |\n| <code>data</code> | no | <code>ComboboxData&lt;Value&gt;</code> | — | Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render. |\n| <code>defaultDropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled dropdown initial opened state |\n| <code>defaultSearchValue</code> | no | <code>string</code> | — | Default search value |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>dropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled dropdown opened state |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>floatingHeight</code> | no | <code>\"viewport\"</code> | <code>\"viewport\"</code> | If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. |\n| <code>hiddenInputProps</code> | no | <code>Omit&lt;React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;, \"value\"&gt;</code> | — | Props passed down to the hidden input |\n| <code>hiddenInputValuesDivider</code> | no | <code>string</code> | — | Divider used to separate values in the hidden input `value` attribute |\n| <code>hidePickedOptions</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When enabled, selected options are hidden from the dropdown list |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>limit</code> | no | <code>number</code> | — | Maximum number of options displayed at a time, `Infinity` by default |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxDropdownHeight</code> | no | <code>string &#124; number</code> | — | `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default |\n| <code>maxValues</code> | no | <code>number</code> | — | Maximum number of values, no limit if not set |\n| <code>nothingFoundMessage</code> | no | <code>React.ReactNode</code> | — | Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. |\n| <code>openOnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controls whether dropdown opens when the input receives focus |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>scrollAreaProps</code> | no | <code>ScrollAreaProps</code> | — | Props passed down to the underlying `ScrollArea` component in the dropdown |\n| <code>searchValue</code> | no | <code>string</code> | — | Controlled search value |\n| <code>searchable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Allows searching through options by user input |\n| <code>selectFirstOptionOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the first option is selected when value changes, `false` by default |\n| <code>selectFirstOptionOnDropdownOpen</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the first option is selected when dropdown opens, `false` by default |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAlignedLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, unchecked labels are aligned with checked ones |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withCheckIcon</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the check icon is displayed near the selected option label |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withPillsReorder</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. |\n| <code>withScrollArea</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-nativescrollarea\"></a>\n### `NativeScrollArea`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/native-scroll-area/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-nativeselect\"></a>\n### `NativeSelect`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/native-select/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 5 more ...; bottomSection?: Record&lt;...&gt;; }</code> | — | — |\n| <code>data</code> | no | <code>ComboboxStringGroupData</code> | — | Data used to render options. Accepts strings, objects with label/value, or grouped options. If `children` prop is provided, `data` will be ignored. |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-navlink\"></a>\n### `NavLink`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/nav-link/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>active</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the link should have active styles |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; children?: Record&lt;string, any&gt;; root?: Record&lt;...&gt;; chevron?: Record&lt;...&gt;; description?: Record&lt;...&gt;; collapse?: Record&lt;...&gt;; } &#124; u...</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>childrenOffset</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Controls indentation of nested NavLink components, key of `theme.spacing` or any valid CSS value |\n| <code>defaultOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled nested items collapse initial state |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Link description, displayed below the label |\n| <code>disableRightSectionRotation</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, right section will not be rotated when collapse is opened |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set to `false`, child `NavLinks` are unmounted when collapsed |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Main link label |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Section displayed on the left side of the label |\n| <code>noWrap</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, label and description are truncated with ellipsis instead of wrapping |\n| <code>opened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled nested items collapse state |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Section displayed on the right side of the label |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-notification\"></a>\n### `Notification`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/notification/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; title?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; icon?: Record&lt;string, any&gt;; loader?: Record&lt;...&gt;; closeButton?: Record&lt;...&gt;; description?: Record&lt;...&gt;; }</code> | — | — |\n| <code>closeButtonProps</code> | no | <code>(ElementProps&lt;\"button\"&gt; &amp; DataAttributes)</code> | — | Props passed down to the close button |\n| <code>icon</code> | no | <code>React.ReactNode</code> | — | Notification icon, replaces color line |\n| <code>loaderProps</code> | no | <code>LoaderProps</code> | — | Props passed down to the `Loader` component |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, displays a `Loader` component instead of the icon. Takes precedence over the `icon` prop if both are provided. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCloseButton</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the close button is visible |\n\n<a id=\"component-numberformatter\"></a>\n### `NumberFormatter`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/number-formatter/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowNegative</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, negative values are allowed |\n| <code>decimalScale</code> | no | <code>number</code> | — | Limits the number of digits that are displayed after the decimal point |\n| <code>decimalSeparator</code> | no | <code>string</code> | — | Character used as a decimal separator, `'.'` by default |\n| <code>fixedDecimalScale</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, zeros are added after `decimalSeparator` to match given `decimalScale`. |\n| <code>suffix</code> | no | <code>string</code> | — | Suffix added after the value |\n| <code>thousandSeparator</code> | no | <code>string &#124; false &#124; true</code> | — | A character used to separate thousands |\n| <code>thousandsGroupStyle</code> | no | <code>\"none\" &#124; \"thousand\" &#124; \"lakh\" &#124; \"wan\"</code> | <code>\"lakh\"</code>, <code>\"none\"</code>, <code>\"thousand\"</code>, <code>\"wan\"</code> | Defines the thousand grouping style |\n\n<a id=\"component-numberinput\"></a>\n### `NumberInput`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/number-input/)\n- Temporary bind: `number` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDecimal</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, decimal values are allowed |\n| <code>allowLeadingZeros</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether leading zeros are allowed during input. If `false`, leading zeros are removed as you type (e.g., typing `007` results in `7`). Works in conjunction with `trimLeadingZeroesOnBlur`. |\n| <code>allowNegative</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether negative numbers are allowed. If `false`, the input will not accept negative values, and the decrement button will stop at `0` (when `min` is not set). |\n| <code>allowedDecimalSeparators</code> | no | <code>string[]</code> | — | Characters which when pressed result in a decimal separator. These characters will be replaced by the `decimalSeparator` in the input value. |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 7 more ...; controls?: Record&lt;...&gt;; }</code> | — | — |\n| <code>clampBehavior</code> | no | <code>\"none\" &#124; \"strict\" &#124; \"blur\"</code> | <code>\"blur\"</code>, <code>\"none\"</code>, <code>\"strict\"</code> | Controls how values are clamped to the `min`/`max` range: - `'blur'` (default): User can type any value, but it's clamped when the input loses focus - `'strict'`: User cannot type values outside the range - `'none'`: No clamping; `min`/`max` only apply to increment/decrement controls and arrow keys |\n| <code>decimalScale</code> | no | <code>number</code> | — | Limits the number of digits that can be entered after the decimal point |\n| <code>decimalSeparator</code> | no | <code>string</code> | — | Character used as a decimal separator. Generally used with `allowedDecimalSeparators` prop. |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>fixedDecimalScale</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If `true`, automatically pads the decimal part with zeros to match `decimalScale` (e.g., with `decimalScale={2}`, typing `5.1` displays as `5.10`). Requires `decimalScale` to be set. |\n| <code>hideControls</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the up/down controls are hidden |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>selectAllOnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, all text is selected when the input receives focus |\n| <code>startValue</code> | no | <code>T</code> | — | Value used when incrementing/decrementing an empty input. If `min` is set and `startValue &lt; min`, `min` is used instead. |\n| <code>stepHoldDelay</code> | no | <code>number</code> | — | Initial delay in milliseconds before stepping the value. |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>suffix</code> | no | <code>string</code> | — | Suffix added after the input value |\n| <code>thousandSeparator</code> | no | <code>string &#124; false &#124; true</code> | — | A character used to separate thousands |\n| <code>thousandsGroupStyle</code> | no | <code>\"none\" &#124; \"thousand\" &#124; \"lakh\" &#124; \"wan\"</code> | <code>\"lakh\"</code>, <code>\"none\"</code>, <code>\"thousand\"</code>, <code>\"wan\"</code> | Defines the thousand grouping style. 'thousand' (1,000), 'lakh' (1,00,000), 'wan' (1,0000), 'none'. |\n| <code>trimLeadingZeroesOnBlur</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, leading zeros are removed on blur. For example, `00100` -&gt; `100` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>valueIsNumericString</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Advanced: Set to `true` if you're passing numeric strings (e.g., `\"12345\"`) and using formatting props like `prefix` or `suffix`. In most cases, you don't need this prop. See [react-number-format docs](https://www.npmjs.com/package/react-number-format) for details. |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withKeyboardEvents</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, up/down keyboard events increment/decrement value |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-optionalportal\"></a>\n### `OptionalPortal`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/optional-portal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Can render outside the widget root.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-optionsdropdown\"></a>\n### `OptionsDropdown`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/options-dropdown/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-overflowlist\"></a>\n### `OverflowList`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/overflow-list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>collapseFrom</code> | no | <code>\"end\" &#124; \"start\"</code> | <code>\"end\"</code>, <code>\"start\"</code> | Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items |\n| <code>data</code> | yes | <code>T[]</code> | — | Array of items to display |\n| <code>gap</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem |\n| <code>maxRows</code> | no | <code>number</code> | — | Number of rows to display |\n| <code>maxVisibleItems</code> | no | <code>number</code> | — | Maximum number of visible items |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-overlay\"></a>\n### `Overlay`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/overlay/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>backgroundOpacity</code> | no | <code>number</code> | — | Overlay `background-color` opacity 0–1, ignored when `gradient` prop is set |\n| <code>blur</code> | no | <code>string &#124; number</code> | — | Overlay background blur in px (converted to rem). Applies `backdrop-filter: blur()`. Note: backdrop-filter is not supported in all browsers. |\n| <code>center</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Centers content inside the overlay using flexbox (sets display: flex, align-items: center, justify-content: center) |\n| <code>fixed</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Changes position from `absolute` to `fixed` (viewport-relative instead of parent-relative) |\n| <code>gradient</code> | no | <code>string</code> | — | Changes overlay to gradient. If set, both `color` and `backgroundOpacity` props are ignored. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-pagination\"></a>\n### `Pagination`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: `number` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: <code>Pagination.Control</code>, <code>Pagination.Dots</code>, <code>Pagination.First</code>, <code>Pagination.Items</code>, <code>Pagination.Label</code>, <code>Pagination.Last</code>, <code>Pagination.Next</code>, <code>Pagination.Previous</code>, <code>Pagination.Root</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; control?: Record&lt;string, any&gt;; dots?: Record&lt;string, any&gt;; items?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on the active page background color to ensure sufficient contrast |\n| <code>boundaries</code> | no | <code>number</code> | — | Number of elements visible on the left/right edges |\n| <code>gap</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.spacing`, gap between controls |\n| <code>hideWithOnePage</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the pagination is hidden when only one page is available (`total={1}`) |\n| <code>layout</code> | no | <code>\"default\" &#124; \"responsive\"</code> | <code>\"default\"</code>, <code>\"responsive\"</code> | Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label |\n| <code>siblings</code> | no | <code>number</code> | — | Number of siblings displayed on the left/right side of the selected page |\n| <code>startValue</code> | no | <code>number</code> | — | Starting page number, defaults to 1 |\n| <code>total</code> | yes | <code>number</code> | — | Total number of pages, must be an integer |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withControls</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, next/previous controls are displayed |\n| <code>withEdges</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, first/last controls are displayed |\n| <code>withPages</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set to `false`, page number buttons are hidden, only next/previous controls remain |\n\n<a id=\"component-pagination-2e-control\"></a>\n### `Pagination.Control`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>active</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Applies active styles, adds `data-active` attribute |\n| <code>withPadding</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Applies padding |\n\n<a id=\"component-pagination-2e-dots\"></a>\n### `Pagination.Dots`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-pagination-2e-first\"></a>\n### `Pagination.First`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-pagination-2e-items\"></a>\n### `Pagination.Items`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-pagination-2e-label\"></a>\n### `Pagination.Label`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-pagination-2e-last\"></a>\n### `Pagination.Last`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-pagination-2e-next\"></a>\n### `Pagination.Next`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-pagination-2e-previous\"></a>\n### `Pagination.Previous`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-pagination-2e-root\"></a>\n### `Pagination.Root`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; control?: Record&lt;string, any&gt;; dots?: Record&lt;string, any&gt;; items?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on the active page background color to ensure sufficient contrast |\n| <code>boundaries</code> | no | <code>number</code> | — | Number of elements visible on the left/right edges |\n| <code>layout</code> | no | <code>\"default\" &#124; \"responsive\"</code> | <code>\"default\"</code>, <code>\"responsive\"</code> | Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label |\n| <code>siblings</code> | no | <code>number</code> | — | Number of siblings displayed on the left/right side of the selected page |\n| <code>startValue</code> | no | <code>number</code> | — | Starting page number, defaults to 1 |\n| <code>total</code> | yes | <code>number</code> | — | Total number of pages, must be an integer |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-paginationcontrol\"></a>\n### `PaginationControl`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-control/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>active</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Applies active styles, adds `data-active` attribute |\n| <code>withPadding</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Applies padding |\n\n<a id=\"component-paginationdots\"></a>\n### `PaginationDots`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-dots/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-paginationfirst\"></a>\n### `PaginationFirst`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-first/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-paginationitems\"></a>\n### `PaginationItems`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-items/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-paginationlabel\"></a>\n### `PaginationLabel`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-label/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-paginationlast\"></a>\n### `PaginationLast`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-last/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-paginationnext\"></a>\n### `PaginationNext`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-next/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-paginationprevious\"></a>\n### `PaginationPrevious`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-previous/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-paginationroot\"></a>\n### `PaginationRoot`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pagination-root/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; control?: Record&lt;string, any&gt;; dots?: Record&lt;string, any&gt;; items?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on the active page background color to ensure sufficient contrast |\n| <code>boundaries</code> | no | <code>number</code> | — | Number of elements visible on the left/right edges |\n| <code>layout</code> | no | <code>\"default\" &#124; \"responsive\"</code> | <code>\"default\"</code>, <code>\"responsive\"</code> | Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label |\n| <code>siblings</code> | no | <code>number</code> | — | Number of siblings displayed on the left/right side of the selected page |\n| <code>startValue</code> | no | <code>number</code> | — | Starting page number, defaults to 1 |\n| <code>total</code> | yes | <code>number</code> | — | Total number of pages, must be an integer |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-paper\"></a>\n### `Paper`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/paper/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-passwordinput\"></a>\n### `PasswordInput`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/password-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 7 more ...; innerInput?: Record&lt;...&gt;; }</code> | — | — |\n| <code>defaultVisible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the input value is visible by default |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>visibilityToggleButtonProps</code> | no | <code>Record&lt;string, any&gt;</code> | — | Props passed down to the visibility toggle button |\n| <code>visible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the input value is visible |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-pill\"></a>\n### `Pill`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pill/)\n- Temporary bind: not available\n- Subcomponents: <code>Pill.Group</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; remove?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>removeButtonProps</code> | no | <code>(CloseButtonProps &amp; React.ClassAttributes&lt;HTMLButtonElement&gt; &amp; React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;)</code> | — | Props passed down to the remove button |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withRemoveButton</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controls visibility of the remove button |\n\n<a id=\"component-pill-2e-group\"></a>\n### `Pill.Group`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pill/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>gap</code> | no | <code>number &#124; MantineSize &#124; (string &amp; {})</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Controls spacing between pills, by default controlled by `size` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-pillgroup\"></a>\n### `PillGroup`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/pill-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ group?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>gap</code> | no | <code>number &#124; MantineSize &#124; (string &amp; {})</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Controls spacing between pills, by default controlled by `size` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-pillsinput\"></a>\n### `PillsInput`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/pills-input/)\n- Temporary bind: not available\n- Subcomponents: <code>PillsInput.Field</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-pillsinput-2e-field\"></a>\n### `PillsInput.Field`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/pills-input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-pillsinputfield\"></a>\n### `PillsInputField`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/pills-input-field/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level composition primitive that requires authored callbacks.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-pininput\"></a>\n### `PinInput`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/pin-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>ariaLabel</code> | no | <code>string</code> | — | `aria-label` attribute |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; pinInput?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>error</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Sets `aria-invalid` attribute and applies error styles to all inputs |\n| <code>gap</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem |\n| <code>hiddenInputProps</code> | no | <code>React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;</code> | — | Props passed down to the hidden input |\n| <code>inputType</code> | no | <code>React.HTMLInputTypeAttribute</code> | <code>\"button\"</code>, <code>\"checkbox\"</code>, <code>\"color\"</code>, <code>\"date\"</code>, <code>\"datetime-local\"</code>, <code>\"email\"</code>, <code>\"file\"</code>, <code>\"hidden\"</code>, <code>\"image\"</code>, <code>\"month\"</code>, <code>\"number\"</code>, <code>\"password\"</code>, <code>\"radio\"</code>, <code>\"range\"</code>, <code>\"reset\"</code>, <code>\"search\"</code>, <code>\"submit\"</code>, <code>\"tel\"</code>, <code>\"text\"</code>, <code>\"time\"</code>, <code>\"url\"</code>, <code>\"week\"</code> | Inputs `type` attribute, inferred from the `type` prop if not specified |\n| <code>length</code> | no | <code>number</code> | — | Number of inputs |\n| <code>manageFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether focus should be moved automatically to the next input once filled |\n| <code>success</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Applies success styles to all inputs |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-popover\"></a>\n### `Popover`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/popover/)\n- Temporary bind: `boolean` via `defaultChecked`; read from `inputs.<bindName>`\n- Subcomponents: <code>Popover.ContextMenu</code>, <code>Popover.Dropdown</code>, <code>Popover.Target</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>arrowOffset</code> | no | <code>number</code> | — | Arrow offset in px |\n| <code>arrowPosition</code> | no | <code>\"center\" &#124; \"side\" &#124; \"merge\"</code> | <code>\"center\"</code>, <code>\"merge\"</code>, <code>\"side\"</code> | Arrow position |\n| <code>arrowRadius</code> | no | <code>number</code> | — | Arrow `border-radius` in px |\n| <code>arrowSize</code> | no | <code>number</code> | — | Arrow size in px |\n| <code>attributes</code> | no | <code>{ dropdown?: Record&lt;string, any&gt;; overlay?: Record&lt;string, any&gt;; arrow?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>clickOutsideEvents</code> | no | <code>string[]</code> | — | Events that trigger outside clicks |\n| <code>closeOnClickOutside</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dropdown should be closed on outside clicks |\n| <code>closeOnEscape</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dropdown should be closed when `Escape` key is pressed |\n| <code>defaultOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Initial opened state for uncontrolled component |\n| <code>floatingStrategy</code> | no | <code>\"fixed\" &#124; \"absolute\"</code> | <code>\"absolute\"</code>, <code>\"fixed\"</code> | Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) |\n| <code>hideDetached</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. |\n| <code>keepMountedMode</code> | no | <code>\"activity\" &#124; \"display-none\"</code> | <code>\"activity\"</code>, <code>\"display-none\"</code> | Controls how the dropdown is hidden when `keepMounted` is set: `'activity'` – hidden with React 19 `Activity` component, `'display-none'` – hidden with `display: none` styles |\n| <code>middlewares</code> | no | <code>PopoverMiddlewares</code> | — | Floating ui middlewares to configure position handling |\n| <code>opened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled dropdown opened state |\n| <code>overlayProps</code> | no | <code>(OverlayProps &amp; ElementProps&lt;\"div\"&gt;)</code> | — | Props passed down to `Overlay` component |\n| <code>position</code> | no | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Dropdown position relative to the target element |\n| <code>preventPositionChangeWhenVisible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. |\n| <code>returnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether focus should be automatically returned to control when dropdown closes |\n| <code>transitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to the `Transition` component. Use to configure duration and animation type. |\n| <code>trapFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether focus should be trapped within dropdown |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withArrow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether component should have an arrow |\n| <code>withOverlay</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the overlay should be displayed when the dropdown is opened |\n| <code>withRoles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dropdown and target elements should have accessible roles |\n\n<a id=\"component-popover-2e-contextmenu\"></a>\n### `Popover.ContextMenu`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/popover/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>longPressDelay</code> | no | <code>number</code> | — | Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default |\n\n<a id=\"component-popover-2e-dropdown\"></a>\n### `Popover.Dropdown`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/popover/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-popover-2e-target\"></a>\n### `Popover.Target`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/popover/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>popupType</code> | no | <code>string</code> | — | Popup accessible type |\n\n<a id=\"component-popovercontextmenu\"></a>\n### `PopoverContextMenu`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/popover-context-menu/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>longPressDelay</code> | no | <code>number</code> | — | Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default |\n\n<a id=\"component-popoverdropdown\"></a>\n### `PopoverDropdown`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/popover-dropdown/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-popovertarget\"></a>\n### `PopoverTarget`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/popover-target/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>popupType</code> | no | <code>string</code> | — | Popup accessible type |\n\n<a id=\"component-portal\"></a>\n### `Portal`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/portal/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Can render outside the widget root.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-progress\"></a>\n### `Progress`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/progress/)\n- Temporary bind: not available\n- Subcomponents: <code>Progress.Label</code>, <code>Progress.Root</code>, <code>Progress.Section</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>animated</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the sections stripes are animated (automatically enables striped) |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts label text color based on section background color for readability |\n| <code>striped</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the section has stripes |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Controls sections width transition duration, value is specified in ms |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-progress-2e-label\"></a>\n### `Progress.Label`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/progress/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-progress-2e-root\"></a>\n### `Progress.Root`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/progress/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts label text color based on section background color for readability |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Controls sections width transition duration, value is specified in ms |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-progress-2e-section\"></a>\n### `Progress.Section`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/progress/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>animated</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the sections stripes are animated, `striped` prop is ignored |\n| <code>striped</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the section has stripes |\n| <code>withAria</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether `aria-*` props should be added to the root element |\n\n<a id=\"component-progresslabel\"></a>\n### `ProgressLabel`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/progress-label/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-progressroot\"></a>\n### `ProgressRoot`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/progress-root/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts label text color based on section background color for readability |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Controls sections width transition duration, value is specified in ms |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-progresssection\"></a>\n### `ProgressSection`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/progress-section/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>animated</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the sections stripes are animated, `striped` prop is ignored |\n| <code>striped</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the section has stripes |\n| <code>withAria</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether `aria-*` props should be added to the root element |\n\n<a id=\"component-radio\"></a>\n### `Radio`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/radio/)\n- Temporary bind: not available\n- Subcomponents: <code>Radio.Card</code>, <code>Radio.Group</code>, <code>Radio.Indicator</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; icon?: Record&lt;string, any&gt;; ... 4 more ...; labelWrapper?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Description displayed below the label |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Error displayed below the label |\n| <code>iconColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Content of the `label` associated with the radio |\n| <code>labelPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the label relative to the input |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, applies error styles to the radio when `error` prop is set |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the root element |\n\n<a id=\"component-radio-2e-card\"></a>\n### `Radio.Card`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/radio/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ card?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-radio-2e-group\"></a>\n### `Radio.Group`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/radio/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; description?: Record&lt;string, any&gt;; error?: Record&lt;string, any&gt;; success?: Record&lt;...&gt;; required?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelElement</code> | no | <code>\"div\" &#124; \"label\"</code> | <code>\"div\"</code>, <code>\"label\"</code> | Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the `Input.Wrapper` |\n\n<a id=\"component-radio-2e-indicator\"></a>\n### `Radio.Indicator`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/radio/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ icon?: Record&lt;string, any&gt;; indicator?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>iconColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-radiocard\"></a>\n### `RadioCard`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/radio-card/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ card?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-radiogroup\"></a>\n### `RadioGroup`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/radio-group/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; description?: Record&lt;string, any&gt;; error?: Record&lt;string, any&gt;; success?: Record&lt;...&gt;; required?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelElement</code> | no | <code>\"div\" &#124; \"label\"</code> | <code>\"div\"</code>, <code>\"label\"</code> | Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the `Input.Wrapper` |\n\n<a id=\"component-radioicon\"></a>\n### `RadioIcon`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/radio-icon/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-radioindicator\"></a>\n### `RadioIndicator`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/radio-indicator/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ icon?: Record&lt;string, any&gt;; indicator?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>iconColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-rangeslider\"></a>\n### `RangeSlider`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/range-slider/)\n- Temporary bind: `number[]` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; mark?: Record&lt;string, any&gt;; track?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 4 more ...; markLabel?: Record&lt;...&gt;; }</code> | — | — |\n| <code>domain</code> | no | <code>[number, number]</code> | — | Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). |\n| <code>hiddenInputProps</code> | no | <code>React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;</code> | — | Props passed down to the hidden input |\n| <code>inverted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether track values representation should be inverted |\n| <code>labelAlwaysOn</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the label should be visible when the slider is not being dragged or hovered |\n| <code>labelTransitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to the `Transition` component |\n| <code>marks</code> | no | <code>SliderMark[]</code> | — | Marks displayed on the track |\n| <code>maxRange</code> | no | <code>number</code> | — | Maximum range interval |\n| <code>minRange</code> | no | <code>number</code> | — | Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min). |\n| <code>precision</code> | no | <code>number</code> | — | Number of significant digits after the decimal point |\n| <code>pushOnOverlap</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached |\n| <code>restrictToMarks</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the selection should be only allowed from the given marks array |\n| <code>showLabelOnHover</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the label should be displayed when the slider is hovered |\n| <code>thumbChildren</code> | no | <code>React.ReactNode</code> | — | Content rendered inside thumb |\n| <code>thumbFromLabel</code> | no | <code>string</code> | — | First thumb `aria-label` |\n| <code>thumbLabel</code> | no | <code>string</code> | — | `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided) |\n| <code>thumbSize</code> | no | <code>string &#124; number</code> | — | Thumb `width` and `height`, by default value is computed based on `size` prop |\n| <code>thumbToLabel</code> | no | <code>string</code> | — | Second thumb `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-rating\"></a>\n### `Rating`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/rating/)\n- Temporary bind: `number` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowClear</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When true, clicking the same rating value clears the rating to 0, default is false |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; starSymbol?: Record&lt;string, any&gt;; symbolBody?: Record&lt;...&gt;; symbolGroup?: Record&lt;...&gt;; }</code> | — | — |\n| <code>count</code> | no | <code>number</code> | — | Number of rating items (stars), default is 5 |\n| <code>fractions</code> | no | <code>number</code> | — | Number of fractions each item can be divided into, default is 1 |\n| <code>highlightSelectedOnly</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-removescroll\"></a>\n### `RemoveScroll`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/remove-scroll/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Changes global page scrolling.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-ringprogress\"></a>\n### `RingProgress`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/ring-progress/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; svg?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; curve?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Label displayed in the center of the ring |\n| <code>rootColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the unfilled portion of the ring (background). Defaults to gray-2 in light mode, dark-4 in dark mode |\n| <code>roundCaps</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Applies rounded line caps to the start and end of visible sections |\n| <code>sectionGap</code> | no | <code>number</code> | — | Gap between sections in degrees. Reduces the visual size of each section |\n| <code>sections</code> | yes | <code>RingProgressSection[]</code> | — | Array of sections to display in the ring. Each section should have a `value` (0-100), `color`, and optional `tooltip`. Sections can also receive any valid SVG circle element props. |\n| <code>startAngle</code> | no | <code>number</code> | — | Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270 = top |\n| <code>thickness</code> | no | <code>number</code> | — | Ring thickness in pixels. Cannot exceed size / 4 and will be automatically clamped if necessary |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Transition duration in milliseconds for section value and color changes |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-rollingnumber\"></a>\n### `RollingNumber`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/rolling-number/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>animationDuration</code> | no | <code>number</code> | — | Animation duration in milliseconds |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; digit?: Record&lt;string, any&gt;; digitColumn?: Record&lt;string, any&gt;; char?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>decimalScale</code> | no | <code>number</code> | — | Number of decimal places to display |\n| <code>decimalSeparator</code> | no | <code>string</code> | — | Character used as a decimal separator |\n| <code>fixedDecimalScale</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, trailing zeros are added to match `decimalScale` |\n| <code>suffix</code> | no | <code>string</code> | — | Suffix added after the value |\n| <code>tabularNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, use tabular (monospace) numbers |\n| <code>thousandSeparator</code> | no | <code>string &#124; false &#124; true</code> | — | Character used to separate thousands, set to `true` for `,` |\n| <code>timingFunction</code> | no | <code>string</code> | — | CSS timing function for animation |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withLiveRegion</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the root element acts as an `aria-live=\"polite\"` region (`role=\"status\"`) and screen readers announce every value change. When `false`, the root uses `role=\"img\"` so the current value is still accessible but updates are not announced. |\n\n<a id=\"component-scrollarea\"></a>\n### `ScrollArea`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/scroll-area/)\n- Temporary bind: not available\n- Subcomponents: <code>ScrollArea.Autosize</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ content?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; scrollbar?: Record&lt;string, any&gt;; thumb?: Record&lt;string, any&gt;; viewport?: Record&lt;...&gt;; corner?: Record&lt;...&gt;; }</code> | — | — |\n| <code>offsetScrollbars</code> | no | <code>false &#124; true &#124; \"x\" &#124; \"y\" &#124; \"present\"</code> | <code>false</code>, <code>\"present\"</code>, <code>true</code>, <code>\"x\"</code>, <code>\"y\"</code> | Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic) |\n| <code>overscrollBehavior</code> | no | <code>Property.OverscrollBehavior</code> | <code>\"-moz-initial\"</code>, <code>\"auto\"</code>, <code>\"contain\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code> | Defines `overscroll-behavior` of the viewport |\n| <code>scrollHideDelay</code> | no | <code>number</code> | — | Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` |\n| <code>scrollbarSize</code> | no | <code>string &#124; number</code> | — | Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) |\n| <code>scrollbars</code> | no | <code>false &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>false</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch) |\n| <code>startScrollPosition</code> | no | <code>{ x?: number; y?: number; }</code> | — | Initial scroll position set on mount |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>viewportProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the viewport element |\n\n<a id=\"component-scrollarea-2e-autosize\"></a>\n### `ScrollArea.Autosize`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/scroll-area/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ content?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; scrollbar?: Record&lt;string, any&gt;; thumb?: Record&lt;string, any&gt;; viewport?: Record&lt;...&gt;; corner?: Record&lt;...&gt;; }</code> | — | — |\n| <code>offsetScrollbars</code> | no | <code>false &#124; true &#124; \"x\" &#124; \"y\" &#124; \"present\"</code> | <code>false</code>, <code>\"present\"</code>, <code>true</code>, <code>\"x\"</code>, <code>\"y\"</code> | Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic) |\n| <code>overscrollBehavior</code> | no | <code>Property.OverscrollBehavior</code> | <code>\"-moz-initial\"</code>, <code>\"auto\"</code>, <code>\"contain\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code> | Defines `overscroll-behavior` of the viewport |\n| <code>scrollHideDelay</code> | no | <code>number</code> | — | Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` |\n| <code>scrollbarSize</code> | no | <code>string &#124; number</code> | — | Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) |\n| <code>scrollbars</code> | no | <code>false &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>false</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch) |\n| <code>startScrollPosition</code> | no | <code>{ x?: number; y?: number; }</code> | — | Initial scroll position set on mount |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>viewportProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the viewport element |\n\n<a id=\"component-scrollareaautosize\"></a>\n### `ScrollAreaAutosize`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/scroll-area-autosize/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ content?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; scrollbar?: Record&lt;string, any&gt;; thumb?: Record&lt;string, any&gt;; viewport?: Record&lt;...&gt;; corner?: Record&lt;...&gt;; }</code> | — | — |\n| <code>offsetScrollbars</code> | no | <code>false &#124; true &#124; \"x\" &#124; \"y\" &#124; \"present\"</code> | <code>false</code>, <code>\"present\"</code>, <code>true</code>, <code>\"x\"</code>, <code>\"y\"</code> | Determines whether scrollbars should be offset with padding on given axis - `true` - adds padding to offset both scrollbars (always) - `'x'` - adds padding to offset horizontal scrollbar (always) - `'y'` - adds padding to offset vertical scrollbar (always) - `'present'` - adds padding only when scrollbars are visible (dynamic) |\n| <code>overscrollBehavior</code> | no | <code>Property.OverscrollBehavior</code> | <code>\"-moz-initial\"</code>, <code>\"auto\"</code>, <code>\"contain\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code> | Defines `overscroll-behavior` of the viewport |\n| <code>scrollHideDelay</code> | no | <code>number</code> | — | Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` |\n| <code>scrollbarSize</code> | no | <code>string &#124; number</code> | — | Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) |\n| <code>scrollbars</code> | no | <code>false &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>false</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Axis at which scrollbars must be rendered - `'x'` - horizontal scrollbar only - `'y'` - vertical scrollbar only - `'xy'` - both scrollbars - `false` - no scrollbars rendered (content remains scrollable via mouse/touch) |\n| <code>startScrollPosition</code> | no | <code>{ x?: number; y?: number; }</code> | — | Initial scroll position set on mount |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>viewportProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the viewport element |\n\n<a id=\"component-scroller\"></a>\n### `Scroller`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/scroller/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ content?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; chevron?: Record&lt;string, any&gt;; control?: Record&lt;string, any&gt;; container?: Record&lt;...&gt;; }</code> | — | — |\n| <code>controlSize</code> | no | <code>string &#124; number</code> | — | Size of the control buttons, |\n| <code>edgeGradientColor</code> | no | <code>string</code> | — | Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default |\n| <code>endControlIcon</code> | no | <code>React.ReactNode</code> | — | Icon component for the end control, AccordionChevron by default |\n| <code>endControlProps</code> | no | <code>React.DetailedHTMLProps&lt;React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;</code> | — | Props passed to the end control button |\n| <code>scrollAmount</code> | no | <code>number</code> | — | Amount of pixels to scroll when clicking the control buttons, `200` by default |\n| <code>showEndControl</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether end control should always be visible regardless of scroll position, `false` by default |\n| <code>showStartControl</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether start control should always be visible regardless of scroll position, `false` by default |\n| <code>startControlIcon</code> | no | <code>React.ReactNode</code> | — | Icon component for the start control, AccordionChevron by default |\n| <code>startControlProps</code> | no | <code>React.DetailedHTMLProps&lt;React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;</code> | — | Props passed to the start control button |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-segmentedcontrol\"></a>\n### `SegmentedControl`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/segmented-control/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; control?: Record&lt;string, any&gt;; indicator?: Record&lt;...&gt;; innerLabel?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, automatically adjusts label text color for optimal contrast against the indicator background color |\n| <code>data</code> | yes | <code>(Value &#124; SegmentedControlItem&lt;Value&gt;)[]</code> | — | Data based on which controls are rendered |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the component should take 100% width of its parent |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Indicator `transition-duration` in ms, set `0` to turn off transitions |\n| <code>transitionTimingFunction</code> | no | <code>string</code> | — | Indicator `transition-timing-function` property |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withItemsBorders</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether there should be borders between items |\n\n<a id=\"component-select\"></a>\n### `Select`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/select/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Allows deselecting the selected option by clicking it |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; option?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; ... 11 more ...; groupLabel?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoSelectOnBlur</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Automatically selects the highlighted option when input loses focus |\n| <code>checkIconPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the check icon relative to the option label |\n| <code>chevronColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of the default chevron, by default depends on the color scheme |\n| <code>clearButtonProps</code> | no | <code>InputClearButtonProps</code> | — | Props passed down to the clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays clear button in the right section when component has value |\n| <code>comboboxProps</code> | no | <code>ComboboxProps</code> | — | Props passed down to `Combobox` component |\n| <code>data</code> | no | <code>ComboboxData&lt;Value&gt;</code> | — | Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render. |\n| <code>defaultDropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled dropdown initial opened state |\n| <code>defaultSearchValue</code> | no | <code>string</code> | — | Default search value |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>dropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled dropdown opened state |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>floatingHeight</code> | no | <code>\"viewport\"</code> | <code>\"viewport\"</code> | If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. |\n| <code>hiddenInputProps</code> | no | <code>Omit&lt;React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;, \"value\"&gt;</code> | — | Props passed down to the hidden input |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>limit</code> | no | <code>number</code> | — | Maximum number of options displayed at a time, `Infinity` by default |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxDropdownHeight</code> | no | <code>string &#124; number</code> | — | `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default |\n| <code>nothingFoundMessage</code> | no | <code>React.ReactNode</code> | — | Message displayed when no options match the search query or when there is no data |\n| <code>openOnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Opens dropdown when input receives focus (requires searchable={true}) |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>scrollAreaProps</code> | no | <code>ScrollAreaProps</code> | — | Props passed down to the underlying `ScrollArea` component in the dropdown |\n| <code>searchValue</code> | no | <code>string</code> | — | Controlled search value |\n| <code>searchable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the select should be searchable |\n| <code>selectFirstOptionOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the first option is selected when value changes, `false` by default |\n| <code>selectFirstOptionOnDropdownOpen</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the first option is selected when dropdown opens, `false` by default |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAlignedLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Aligns unchecked labels with the checked one |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withCheckIcon</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays check icon near the selected option label |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withScrollArea</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-semicircleprogress\"></a>\n### `SemiCircleProgress`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/semi-circle-progress/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; svg?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; emptySegment?: Record&lt;string, any&gt;; filledSegment?: Record&lt;...&gt;; }</code> | — | — |\n| <code>emptySegmentColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of `theme.colors` or any valid CSS color value |\n| <code>fillDirection</code> | no | <code>\"right-to-left\" &#124; \"left-to-right\"</code> | <code>\"left-to-right\"</code>, <code>\"right-to-left\"</code> | Direction from which the circle is filled |\n| <code>filledSegmentColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of `theme.colors` or any valid CSS color value |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Label rendered inside the circle |\n| <code>labelPosition</code> | no | <code>\"center\" &#124; \"bottom\"</code> | <code>\"bottom\"</code>, <code>\"center\"</code> | Label position relative to the circle center |\n| <code>thickness</code> | no | <code>number</code> | — | Stroke width of the circle segments in px |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Transition duration for the filled segment progress changes in ms. Does not affect color transitions |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-simplegrid\"></a>\n### `SimpleGrid`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/simple-grid/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; container?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoFlow</code> | no | <code>\"auto-fit\" &#124; \"auto-fill\"</code> | <code>\"auto-fill\"</code>, <code>\"auto-fit\"</code> | Grid repeat type when minColWidth is set |\n| <code>autoRows</code> | no | <code>string</code> | — | Sets the size of implicitly created grid rows |\n| <code>minColWidth</code> | no | <code>string &#124; number</code> | — | Minimum column width when using auto-fit/auto-fill. When set, cols prop is ignored |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>verticalSpacing</code> | no | <code>StyleProp&lt;MantineSpacing&gt;</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Spacing between rows. When not set, falls back to spacing value |\n\n<a id=\"component-skeleton\"></a>\n### `Skeleton`\n\n- Safety: `wrapped`\n- Category: `feedback`\n- Documentation: [upstream component API](https://mantine.dev/core/skeleton/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Do not rely on color alone to communicate status.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>animate</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Enables animation |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>circle</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, Skeleton `width` and `border-radius` are equal to its `height` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>visible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether Skeleton overlay should be displayed |\n\n<a id=\"component-slider\"></a>\n### `Slider`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/slider/)\n- Temporary bind: `number` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; mark?: Record&lt;string, any&gt;; track?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 4 more ...; markLabel?: Record&lt;...&gt;; }</code> | — | — |\n| <code>domain</code> | no | <code>[number, number]</code> | — | Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). |\n| <code>hiddenInputProps</code> | no | <code>React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;</code> | — | Props passed down to the hidden input |\n| <code>inverted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether track value representation should be inverted |\n| <code>labelAlwaysOn</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the label should be visible when the slider is not being dragged or hovered |\n| <code>labelTransitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to the `Transition` component |\n| <code>marks</code> | no | <code>SliderMark[]</code> | — | Marks displayed on the track |\n| <code>precision</code> | no | <code>number</code> | — | Number of significant digits after the decimal point |\n| <code>restrictToMarks</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the selection should be only allowed from the given marks array |\n| <code>showLabelOnHover</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the label should be displayed when the slider is hovered |\n| <code>startPointValue</code> | no | <code>number</code> | — | Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set. |\n| <code>thumbChildren</code> | no | <code>React.ReactNode</code> | — | Content rendered inside thumb |\n| <code>thumbLabel</code> | no | <code>string</code> | — | Thumb `aria-label` |\n| <code>thumbProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to thumb element |\n| <code>thumbSize</code> | no | <code>string &#124; number</code> | — | Thumb `width` and `height`, by default value is computed based on `size` prop |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-space\"></a>\n### `Space`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/space/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>undefined</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-splitter\"></a>\n### `Splitter`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/splitter/)\n- Temporary bind: not available\n- Subcomponents: <code>Splitter.Pane</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; thumb?: Record&lt;string, any&gt;; handle?: Record&lt;string, any&gt;; pane?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>handleColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Key of `theme.colors` or any valid CSS color for the separator line |\n| <code>handleIcon</code> | no | <code>React.ReactNode</code> | — | Custom icon displayed in the handle thumb, by default uses grip icon based on orientation |\n| <code>lineSize</code> | no | <code>string &#124; number</code> | — | CSS value for separator line thickness between panes |\n| <code>resetOnDoubleClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked |\n| <code>shiftStep</code> | no | <code>SplitterStep</code> | — | Shift+arrow step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels |\n| <code>sizes</code> | no | <code>SplitterPaneSize[]</code> | — | Controlled sizes, each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed) |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withHandle</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the thumb with grip icon is displayed on the handle |\n\n<a id=\"component-splitter-2e-pane\"></a>\n### `Splitter.Pane`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/splitter/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>collapseThreshold</code> | no | <code>SplitterPaneSize</code> | — | Size below which the pane snaps to collapsed, defaults to `min` |\n| <code>collapsible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Whether this pane can be collapsed |\n| <code>defaultSize</code> | yes | <code>SplitterPaneSize</code> | — | Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage. |\n\n<a id=\"component-splitterpane\"></a>\n### `SplitterPane`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/splitter-pane/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>collapseThreshold</code> | no | <code>SplitterPaneSize</code> | — | Size below which the pane snaps to collapsed, defaults to `min` |\n| <code>collapsible</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Whether this pane can be collapsed |\n| <code>defaultSize</code> | yes | <code>SplitterPaneSize</code> | — | Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage. |\n\n<a id=\"component-spoiler\"></a>\n### `Spoiler`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/spoiler/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ content?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; control?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>defaultExpanded</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Initial expanded state in uncontrolled mode. If `true`, content starts expanded. If `false`, content starts collapsed |\n| <code>expanded</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled expanded state value |\n| <code>hideAriaLabel</code> | no | <code>string</code> | — | Accessible label for the toggle button when expanded. If not set, `hideLabel` is used |\n| <code>hideLabel</code> | no | <code>React.ReactNode</code> | — | Content displayed in the toggle button when content is expanded (to collapse) |\n| <code>maxHeight</code> | no | <code>number</code> | — | Maximum height of visible content in px. When content exceeds this height, the toggle control appears |\n| <code>showAriaLabel</code> | no | <code>string</code> | — | Accessible label for the toggle button when collapsed. If not set, `showLabel` is used |\n| <code>showLabel</code> | no | <code>React.ReactNode</code> | — | Content displayed in the toggle button when content is collapsed (to expand) |\n| <code>transitionDuration</code> | no | <code>number</code> | — | Spoiler reveal transition duration in ms. Set to 0 to disable animation |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-stack\"></a>\n### `Stack`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/stack/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>gap</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem |\n| <code>justify</code> | no | <code>Property.JustifyContent</code> | <code>\"-moz-initial\"</code>, <code>\"center\"</code>, <code>\"end\"</code>, <code>\"flex-end\"</code>, <code>\"flex-start\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"left\"</code>, <code>\"normal\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"right\"</code>, <code>\"space-around\"</code>, <code>\"space-between\"</code>, <code>\"space-evenly\"</code>, <code>\"start\"</code>, <code>\"stretch\"</code>, <code>\"unset\"</code> | Controls `justify-content` CSS property |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-stepper\"></a>\n### `Stepper`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/stepper/)\n- Temporary bind: `number` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: <code>Stepper.Completed</code>, <code>Stepper.Step</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>active</code> | yes | <code>number</code> | — | Index of the active step |\n| <code>allowNextStepsSelect</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When true, users can click and jump to any step. When false, users can only navigate to completed steps |\n| <code>attributes</code> | no | <code>{ content?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; separator?: Record&lt;string, any&gt;; step?: Record&lt;string, any&gt;; ... 9 more ...; stepDescription?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color |\n| <code>contentPadding</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content |\n| <code>iconPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Icon position relative to the step body |\n| <code>iconSize</code> | no | <code>string &#124; number</code> | — | Controls size of the step icon, by default icon size is inferred from `size` prop |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-stepper-2e-completed\"></a>\n### `Stepper.Completed`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/stepper/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-stepper-2e-step\"></a>\n### `Stepper.Step`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/stepper/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowStepClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Set to false to disable clicks on step |\n| <code>allowStepSelect</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Should step selection be allowed |\n| <code>iconPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Icon position relative to step body, controlled by Stepper component |\n| <code>iconSize</code> | no | <code>string &#124; number</code> | — | Icon wrapper size |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Indicates loading state of the step |\n| <code>state</code> | no | <code>\"stepInactive\" &#124; \"stepProgress\" &#124; \"stepCompleted\"</code> | <code>\"stepCompleted\"</code>, <code>\"stepInactive\"</code>, <code>\"stepProgress\"</code> | Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed |\n| <code>withIcon</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When false, hides the step icon. Useful for creating compact steppers with only labels |\n\n<a id=\"component-steppercompleted\"></a>\n### `StepperCompleted`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/stepper-completed/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-stepperstep\"></a>\n### `StepperStep`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/stepper-step/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowStepClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Set to false to disable clicks on step |\n| <code>allowStepSelect</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Should step selection be allowed |\n| <code>iconPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Icon position relative to step body, controlled by Stepper component |\n| <code>iconSize</code> | no | <code>string &#124; number</code> | — | Icon wrapper size |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Indicates loading state of the step |\n| <code>state</code> | no | <code>\"stepInactive\" &#124; \"stepProgress\" &#124; \"stepCompleted\"</code> | <code>\"stepCompleted\"</code>, <code>\"stepInactive\"</code>, <code>\"stepProgress\"</code> | Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed |\n| <code>withIcon</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | When false, hides the step icon. Useful for creating compact steppers with only labels |\n\n<a id=\"component-switch\"></a>\n### `Switch`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/switch/)\n- Temporary bind: `boolean` via `defaultChecked`; read from `inputs.<bindName>`\n- Subcomponents: <code>Switch.Group</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ body?: Record&lt;string, any&gt;; input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; track?: Record&lt;string, any&gt;; ... 5 more ...; trackLabel?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Description displayed below the label |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Error displayed below the label |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Content of the label associated with the switch |\n| <code>labelPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the label relative to the input |\n| <code>offLabel</code> | no | <code>React.ReactNode</code> | — | Inner label when the `Switch` is in unchecked state |\n| <code>thumbIcon</code> | no | <code>React.ReactNode</code> | — | Icon inside the thumb of the switch |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withThumbIndicator</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, displays a colored dot inside the thumb that matches the track background color |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the root element |\n\n<a id=\"component-switch-2e-group\"></a>\n### `Switch.Group`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/switch/)\n- Temporary bind: `string[]` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; description?: Record&lt;string, any&gt;; error?: Record&lt;string, any&gt;; success?: Record&lt;...&gt;; required?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>hiddenInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the hidden input for uncontrolled forms |\n| <code>hiddenInputValuesSeparator</code> | no | <code>string</code> | — | Separator for values in the hidden input for uncontrolled forms |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelElement</code> | no | <code>\"div\" &#124; \"label\"</code> | <code>\"div\"</code>, <code>\"label\"</code> | Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>maxSelectedValues</code> | no | <code>number</code> | — | Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the `Input.Wrapper` |\n\n<a id=\"component-switchgroup\"></a>\n### `SwitchGroup`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/switch-group/)\n- Temporary bind: `string[]` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; description?: Record&lt;string, any&gt;; error?: Record&lt;string, any&gt;; success?: Record&lt;...&gt;; required?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>hiddenInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the hidden input for uncontrolled forms |\n| <code>hiddenInputValuesSeparator</code> | no | <code>string</code> | — | Separator for values in the hidden input for uncontrolled forms |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelElement</code> | no | <code>\"div\" &#124; \"label\"</code> | <code>\"div\"</code>, <code>\"label\"</code> | Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>maxSelectedValues</code> | no | <code>number</code> | — | Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>wrapperProps</code> | no | <code>(React.ClassAttributes&lt;HTMLDivElement&gt; &amp; React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the `Input.Wrapper` |\n\n<a id=\"component-table\"></a>\n### `Table`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: <code>Table.Caption</code>, <code>Table.DataRenderer</code>, <code>Table.ScrollContainer</code>, <code>Table.Tbody</code>, <code>Table.Td</code>, <code>Table.Tfoot</code>, <code>Table.Th</code>, <code>Table.Thead</code>, <code>Table.Tr</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ caption?: Record&lt;string, any&gt;; table?: Record&lt;string, any&gt;; tbody?: Record&lt;string, any&gt;; td?: Record&lt;string, any&gt;; tfoot?: Record&lt;...&gt;; th?: Record&lt;...&gt;; thead?: Record&lt;...&gt;; tr?: Record&lt;...&gt;; }</code> | — | — |\n| <code>borderColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of table borders, key of `theme.colors` or any valid CSS color |\n| <code>captionSide</code> | no | <code>\"bottom\" &#124; \"top\"</code> | <code>\"bottom\"</code>, <code>\"top\"</code> | Side of the `Table.Caption` |\n| <code>data</code> | no | <code>TableData</code> | — | Data used to generate table, ignored if `children` prop is set |\n| <code>highlightOnHover</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, table rows background changes to `highlightOnHoverColor` when hovered |\n| <code>highlightOnHoverColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Background color of table rows when hovered, key of `theme.colors` or any valid CSS color |\n| <code>horizontalSpacing</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem |\n| <code>layout</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"auto\" &#124; \"fixed\"</code> | <code>\"-moz-initial\"</code>, <code>\"auto\"</code>, <code>\"fixed\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code> | Value of `table-layout` style |\n| <code>stickyHeader</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, `Table.Thead` is sticky |\n| <code>stickyHeaderOffset</code> | no | <code>string &#124; number</code> | — | Offset from top at which `Table.Thead` should become sticky |\n| <code>striped</code> | no | <code>false &#124; true &#124; \"odd\" &#124; \"even\"</code> | <code>\"even\"</code>, <code>false</code>, <code>\"odd\"</code>, <code>true</code> | If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used |\n| <code>stripedColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Background color of striped rows, key of `theme.colors` or any valid CSS color |\n| <code>tabularNums</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, `font-variant-numeric: tabular-nums` style is applied |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>verticalSpacing</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem |\n| <code>withColumnBorders</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the table has borders between columns |\n| <code>withRowBorders</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the table has borders between rows |\n| <code>withTableBorder</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the table has the outer border |\n\n<a id=\"component-table-2e-caption\"></a>\n### `Table.Caption`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-table-2e-datarenderer\"></a>\n### `Table.DataRenderer`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>data</code> | yes | <code>TableData</code> | — | — |\n\n<a id=\"component-table-2e-scrollcontainer\"></a>\n### `Table.ScrollContainer`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ scrollContainer?: Record&lt;string, any&gt;; scrollContainerInner?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>maxHeight</code> | no | <code>Property.MaxHeight&lt;string &#124; number&gt;</code> | — | `max-height` of the `Table` at which it should become scrollable |\n| <code>minWidth</code> | no | <code>Property.MinWidth&lt;string &#124; number&gt;</code> | — | `min-width` of the `Table` at which it should become scrollable |\n| <code>scrollAreaProps</code> | no | <code>ScrollAreaProps</code> | — | Props passed down to `ScrollArea` component, not applicable with `type=\"native\"` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-table-2e-tbody\"></a>\n### `Table.Tbody`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-table-2e-td\"></a>\n### `Table.Td`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-table-2e-tfoot\"></a>\n### `Table.Tfoot`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-table-2e-th\"></a>\n### `Table.Th`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-table-2e-thead\"></a>\n### `Table.Thead`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-table-2e-tr\"></a>\n### `Table.Tr`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-tablecaption\"></a>\n### `TableCaption`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table-caption/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-tableofcontents\"></a>\n### `TableOfContents`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/table-of-contents/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Observes headings and scrolling outside the widget root.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-tablescrollcontainer\"></a>\n### `TableScrollContainer`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table-scroll-container/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ scrollContainer?: Record&lt;string, any&gt;; scrollContainerInner?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>maxHeight</code> | no | <code>Property.MaxHeight&lt;string &#124; number&gt;</code> | — | `max-height` of the `Table` at which it should become scrollable |\n| <code>minWidth</code> | no | <code>Property.MinWidth&lt;string &#124; number&gt;</code> | — | `min-width` of the `Table` at which it should become scrollable |\n| <code>scrollAreaProps</code> | no | <code>ScrollAreaProps</code> | — | Props passed down to `ScrollArea` component, not applicable with `type=\"native\"` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-tabletbody\"></a>\n### `TableTbody`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table-tbody/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-tabletd\"></a>\n### `TableTd`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table-td/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-tabletfoot\"></a>\n### `TableTfoot`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table-tfoot/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-tableth\"></a>\n### `TableTh`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table-th/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-tablethead\"></a>\n### `TableThead`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table-thead/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-tabletr\"></a>\n### `TableTr`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/table-tr/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n_No component-specific props. Use the shared prop API._\n\n<a id=\"component-tabs\"></a>\n### `Tabs`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tabs/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: <code>Tabs.List</code>, <code>Tabs.Panel</code>, <code>Tabs.Tab</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>activateTabWithKeyboard</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tab is activated with arrow key press |\n| <code>allowTabDeactivation</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tab can be deactivated |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; panel?: Record&lt;string, any&gt;; list?: Record&lt;string, any&gt;; tab?: Record&lt;string, any&gt;; tabSection?: Record&lt;...&gt;; tabLabel?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `pills` variant |\n| <code>inverted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether tabs should have inverted styles |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active |\n| <code>keepMountedMode</code> | no | <code>\"activity\" &#124; \"display-none\"</code> | <code>\"activity\"</code>, <code>\"display-none\"</code> | Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles |\n| <code>loop</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, arrow key presses loop though items (first to last and last to first) |\n| <code>placement</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-tabs-2e-list\"></a>\n### `Tabs.List`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tabs/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>grow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether tabs should take all available space |\n| <code>justify</code> | no | <code>Property.JustifyContent</code> | <code>\"-moz-initial\"</code>, <code>\"center\"</code>, <code>\"end\"</code>, <code>\"flex-end\"</code>, <code>\"flex-start\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"left\"</code>, <code>\"normal\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"right\"</code>, <code>\"space-around\"</code>, <code>\"space-between\"</code>, <code>\"space-evenly\"</code>, <code>\"start\"</code>, <code>\"stretch\"</code>, <code>\"unset\"</code> | Tabs alignment |\n\n<a id=\"component-tabs-2e-panel\"></a>\n### `Tabs.Panel`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tabs/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component |\n\n<a id=\"component-tabs-2e-tab\"></a>\n### `Tabs.Tab`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tabs/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content displayed on the left side of the label |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content displayed on the right side of the label |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-tabslist\"></a>\n### `TabsList`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tabs-list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>grow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether tabs should take all available space |\n| <code>justify</code> | no | <code>Property.JustifyContent</code> | <code>\"-moz-initial\"</code>, <code>\"center\"</code>, <code>\"end\"</code>, <code>\"flex-end\"</code>, <code>\"flex-start\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"left\"</code>, <code>\"normal\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"right\"</code>, <code>\"space-around\"</code>, <code>\"space-between\"</code>, <code>\"space-evenly\"</code>, <code>\"start\"</code>, <code>\"stretch\"</code>, <code>\"unset\"</code> | Tabs alignment |\n\n<a id=\"component-tabspanel\"></a>\n### `TabsPanel`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tabs-panel/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component |\n\n<a id=\"component-tabstab\"></a>\n### `TabsTab`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tabs-tab/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content displayed on the left side of the label |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content displayed on the right side of the label |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-tagsinput\"></a>\n### `TagsInput`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/tags-input/)\n- Temporary bind: `string[]` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>acceptValueOnBlur</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the value typed in by the user but not submitted is accepted when the input is blurred |\n| <code>allowDuplicates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, duplicate tags are allowed |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; option?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; ... 14 more ...; inputField?: Record&lt;...&gt;; }</code> | — | — |\n| <code>clearButtonProps</code> | no | <code>InputClearButtonProps</code> | — | Props passed down to the clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the clear button is displayed in the right section when the component has value |\n| <code>comboboxProps</code> | no | <code>ComboboxProps</code> | — | Props passed down to `Combobox` component |\n| <code>data</code> | no | <code>ComboboxGenericData</code> | — | Data displayed in the dropdown. Values must be unique. |\n| <code>defaultDropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled dropdown initial opened state |\n| <code>defaultSearchValue</code> | no | <code>string</code> | — | Default search value |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>dropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled dropdown opened state |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>floatingHeight</code> | no | <code>\"viewport\"</code> | <code>\"viewport\"</code> | If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. |\n| <code>hiddenInputProps</code> | no | <code>Omit&lt;React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;, \"value\"&gt;</code> | — | Props passed down to the hidden input |\n| <code>hiddenInputValuesDivider</code> | no | <code>string</code> | — | Divider used to separate values in the hidden input `value` attribute |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>limit</code> | no | <code>number</code> | — | Maximum number of options displayed at a time, `Infinity` by default |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxDropdownHeight</code> | no | <code>string &#124; number</code> | — | `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default |\n| <code>maxTags</code> | no | <code>number</code> | — | Maximum number of tags |\n| <code>openOnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown opens when the input receives focus |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>scrollAreaProps</code> | no | <code>ScrollAreaProps</code> | — | Props passed down to the underlying `ScrollArea` component in the dropdown |\n| <code>searchValue</code> | no | <code>string</code> | — | Controlled search value |\n| <code>selectFirstOptionOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the first option is selected when value changes, `false` by default |\n| <code>selectFirstOptionOnDropdownOpen</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the first option is selected when dropdown opens, `false` by default |\n| <code>splitChars</code> | no | <code>string[]</code> | — | Characters that should trigger tags split, `[',']` by default |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withPillsReorder</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. |\n| <code>withScrollArea</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the options should be wrapped with `ScrollArea.AutoSize`, `true` by default |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-text\"></a>\n### `Text`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/text/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient configuration, ignored when `variant` is not `gradient` |\n| <code>inherit</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether font properties should be inherited from the parent |\n| <code>inline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Sets `line-height` to 1 for centering |\n| <code>lineClamp</code> | no | <code>number</code> | — | Number of lines after which Text will be truncated |\n| <code>span</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Shorthand for `component=\"span\"` |\n| <code>textWrap</code> | no | <code>\"wrap\" &#124; \"nowrap\" &#124; \"balance\" &#124; \"pretty\" &#124; \"stable\"</code> | <code>\"balance\"</code>, <code>\"nowrap\"</code>, <code>\"pretty\"</code>, <code>\"stable\"</code>, <code>\"wrap\"</code> | Controls `text-wrap` CSS property |\n| <code>truncate</code> | no | <code>false &#124; true &#124; \"end\" &#124; \"start\"</code> | <code>\"end\"</code>, <code>false</code>, <code>\"start\"</code>, <code>true</code> | Side on which Text must be truncated, if `true`, text is truncated from the start |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-textinput\"></a>\n### `TextInput`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/text-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 5 more ...; bottomSection?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-textarea\"></a>\n### `Textarea`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/textarea/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 5 more ...; bottomSection?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autosize</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, enables textarea height growing with its content |\n| <code>bottomSection</code> | no | <code>React.ReactNode</code> | — | Content rendered at the bottom of the input, inside the border |\n| <code>bottomSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `bottomSection` element |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxRows</code> | no | <code>number</code> | — | Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set |\n| <code>minRows</code> | no | <code>number</code> | — | Minimum rows of autosize textarea, ignored if `autosize` prop is not set |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>resize</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"block\" &#124; \"inline\" &#124; \"both\" &#124; \"horizontal\" &#124; \"vertical\"</code> | <code>\"-moz-initial\"</code>, <code>\"block\"</code>, <code>\"both\"</code>, <code>\"horizontal\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"inline\"</code>, <code>\"none\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"unset\"</code>, <code>\"vertical\"</code> | Controls `resize` CSS property |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-themeicon\"></a>\n### `ThemeIcon`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/theme-icon/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>gradient</code> | no | <code>MantineGradient</code> | — | Gradient data used when `variant=\"gradient\"` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-timeline\"></a>\n### `Timeline`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/timeline/)\n- Temporary bind: not available\n- Subcomponents: <code>Timeline.Item</code>\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>active</code> | no | <code>number</code> | — | Index of the active element |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; item?: Record&lt;string, any&gt;; itemTitle?: Record&lt;string, any&gt;; itemBody?: Record&lt;string, any&gt;; itemContent?: Record&lt;...&gt;; itemBullet?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>bulletSize</code> | no | <code>string &#124; number</code> | — | Size of the bullet |\n| <code>lineWidth</code> | no | <code>string &#124; number</code> | — | Control width of the line |\n| <code>reverseActive</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the active items direction is reversed without reversing items order |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-timeline-2e-item\"></a>\n### `Timeline.Item`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/timeline/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>bullet</code> | no | <code>React.ReactNode</code> | — | React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. |\n| <code>lineVariant</code> | no | <code>\"dashed\" &#124; \"dotted\" &#124; \"solid\"</code> | <code>\"dashed\"</code>, <code>\"dotted\"</code>, <code>\"solid\"</code> | Controls line border style |\n\n<a id=\"component-timelineitem\"></a>\n### `TimelineItem`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/timeline-item/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>bullet</code> | no | <code>React.ReactNode</code> | — | React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. |\n| <code>lineVariant</code> | no | <code>\"dashed\" &#124; \"dotted\" &#124; \"solid\"</code> | <code>\"dashed\"</code>, <code>\"dotted\"</code>, <code>\"solid\"</code> | Controls line border style |\n\n<a id=\"component-title\"></a>\n### `Title`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/title/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>lineClamp</code> | no | <code>number</code> | — | Number of lines after which heading will be truncated |\n| <code>textWrap</code> | no | <code>\"wrap\" &#124; \"nowrap\" &#124; \"balance\" &#124; \"pretty\" &#124; \"stable\"</code> | <code>\"balance\"</code>, <code>\"nowrap\"</code>, <code>\"pretty\"</code>, <code>\"stable\"</code>, <code>\"wrap\"</code> | Heading `text-wrap` CSS property |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-tooltip\"></a>\n### `Tooltip`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tooltip/)\n- Temporary bind: not available\n- Subcomponents: <code>Tooltip.Floating</code>, <code>Tooltip.Group</code>\n- Component-specific blocked props: <code>target</code> — String targets can select elements outside the widget root\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>arrowOffset</code> | no | <code>number</code> | — | Arrow offset in px |\n| <code>arrowPosition</code> | no | <code>\"center\" &#124; \"side\" &#124; \"merge\"</code> | <code>\"center\"</code>, <code>\"merge\"</code>, <code>\"side\"</code> | Arrow position relative to the tooltip |\n| <code>arrowRadius</code> | no | <code>number</code> | — | Arrow `border-radius` in px |\n| <code>arrowSize</code> | no | <code>number</code> | — | Arrow size in px |\n| <code>attributes</code> | no | <code>{ tooltip?: Record&lt;string, any&gt;; arrow?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color for `filled` variant |\n| <code>closeDelay</code> | no | <code>number</code> | — | Close delay in ms |\n| <code>defaultOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled tooltip initial opened state |\n| <code>events</code> | no | <code>{ hover: boolean; focus: boolean; touch: boolean; }</code> | — | Determines which events will be used to show tooltip |\n| <code>floatingStrategy</code> | no | <code>\"fixed\" &#124; \"absolute\"</code> | <code>\"absolute\"</code>, <code>\"fixed\"</code> | Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) |\n| <code>inline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Must be set if the tooltip target is an inline element |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Tooltip content |\n| <code>middlewares</code> | no | <code>TooltipMiddlewares</code> | — | Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default |\n| <code>multiline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether content should be wrapped on to the next line, `false` by default |\n| <code>openDelay</code> | no | <code>number</code> | — | Open delay in ms |\n| <code>opened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled opened state |\n| <code>position</code> | no | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component) |\n| <code>transitionProps</code> | no | <code>Partial&lt;Omit&lt;TransitionProps, \"mounted\"&gt;&gt;</code> | — | Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withArrow</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the tooltip has an arrow |\n\n<a id=\"component-tooltip-2e-floating\"></a>\n### `Tooltip.Floating`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tooltip/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ tooltip?: Record&lt;string, any&gt;; arrow?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>defaultOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled tooltip initial opened state |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Tooltip content |\n| <code>middlewares</code> | no | <code>TooltipMiddlewares</code> | — | Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default |\n| <code>multiline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether content should be wrapped on to the next line, `false` by default |\n| <code>position</code> | no | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component) |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-tooltip-2e-group\"></a>\n### `Tooltip.Group`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tooltip/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>closeDelay</code> | no | <code>number</code> | — | Close delay in ms |\n| <code>openDelay</code> | no | <code>number</code> | — | Open delay in ms |\n\n<a id=\"component-tooltipfloating\"></a>\n### `TooltipFloating`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tooltip-floating/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ tooltip?: Record&lt;string, any&gt;; arrow?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>defaultOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Uncontrolled tooltip initial opened state |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Tooltip content |\n| <code>middlewares</code> | no | <code>TooltipMiddlewares</code> | — | Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default |\n| <code>multiline</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether content should be wrapped on to the next line, `false` by default |\n| <code>position</code> | no | <code>\"left\" &#124; \"right\" &#124; \"bottom\" &#124; \"top\" &#124; \"left-end\" &#124; \"left-start\" &#124; \"right-end\" &#124; \"right-start\" &#124; \"bottom-end\" &#124; \"bottom-start\" &#124; \"top-end\" &#124; \"top-start\"</code> | <code>\"bottom\"</code>, <code>\"bottom-end\"</code>, <code>\"bottom-start\"</code>, <code>\"left\"</code>, <code>\"left-end\"</code>, <code>\"left-start\"</code>, <code>\"right\"</code>, <code>\"right-end\"</code>, <code>\"right-start\"</code>, <code>\"top\"</code>, <code>\"top-end\"</code>, <code>\"top-start\"</code> | Tooltip position relative to target element (`Tooltip` component) or mouse (`Tooltip.Floating` component) |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-tooltipgroup\"></a>\n### `TooltipGroup`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tooltip-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>closeDelay</code> | no | <code>number</code> | — | Close delay in ms |\n| <code>openDelay</code> | no | <code>number</code> | — | Open delay in ms |\n\n<a id=\"component-transition\"></a>\n### `Transition`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/core/transition/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Requires an authored render callback.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-tree\"></a>\n### `Tree`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tree/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowRangeSelection</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree nodes range can be selected with click when `Shift` key is pressed |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; node?: Record&lt;string, any&gt;; subtree?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>checkOnSpace</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree node is checked on space key press |\n| <code>clearSelectionOnOutsideClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, selection is cleared when user clicks outside of the tree |\n| <code>data</code> | yes | <code>TreeNodeData[]</code> | — | Data used to render nodes |\n| <code>expandOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree node with children is expanded on click |\n| <code>expandOnSpace</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree node with children is expanded on space key press |\n| <code>keepMounted</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. |\n| <code>levelOffset</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value |\n| <code>selectOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tree node is selected on click |\n| <code>tree</code> | no | <code>UseTreeReturnType</code> | — | Use-tree hook instance that can be used to manipulate component state |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withDragHandle</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps` from the `renderNode` payload, rather than anywhere on the node. |\n| <code>withLines</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, connecting lines are rendered showing parent-child relationships |\n\n<a id=\"component-treeselect\"></a>\n### `TreeSelect`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tree-select/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `mode` is `multiple` or `checkbox`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Allows deselecting in single mode |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; option?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; ... 14 more ...; inputField?: Record&lt;...&gt;; }</code> | — | — |\n| <code>checkStrictly</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables parent-child cascade in checkbox mode |\n| <code>checkedStrategy</code> | no | <code>\"all\" &#124; \"parent\" &#124; \"child\"</code> | <code>\"all\"</code>, <code>\"child\"</code>, <code>\"parent\"</code> | Controls which checked nodes appear in value/pills in checkbox mode |\n| <code>chevronAriaLabels</code> | no | <code>TreeSelectChevronAriaLabels</code> | — | aria-label values for the expand/collapse chevron button |\n| <code>chevronColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls the default chevron color |\n| <code>clearButtonProps</code> | no | <code>InputClearButtonProps</code> | — | Props for the clear button |\n| <code>clearSearchOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Clear search on selection change |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Shows clear button |\n| <code>comboboxProps</code> | no | <code>Record&lt;string, any&gt;</code> | — | Props passed to the underlying Combobox |\n| <code>data</code> | yes | <code>TreeNodeData[]</code> | — | Tree data |\n| <code>defaultDropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Default dropdown state |\n| <code>defaultExpandAll</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Expand all nodes by default |\n| <code>defaultExpandedValues</code> | no | <code>string[]</code> | — | Default expanded node values |\n| <code>defaultSearchValue</code> | no | <code>string</code> | — | Default search value |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>dropdownOpened</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Controlled dropdown state |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>expandOnClick</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Also toggle expand when clicking a parent node (not just the chevron). In `single` and `multiple` modes, parent clicks only expand; only leaves can be selected. In `checkbox` mode, parent clicks both check and expand. |\n| <code>expandedValues</code> | no | <code>string[]</code> | — | Controlled expanded state |\n| <code>hiddenInputProps</code> | no | <code>Omit&lt;React.DetailedHTMLProps&lt;React.InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;, \"value\"&gt;</code> | — | Props for the hidden input |\n| <code>hiddenInputValuesDivider</code> | no | <code>string</code> | — | Divider for hidden input values |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxDisplayedValues</code> | no | <code>number</code> | — | Maximum displayed pills before \"+N more\" |\n| <code>maxDropdownHeight</code> | no | <code>string &#124; number</code> | — | Max dropdown height |\n| <code>maxValues</code> | no | <code>number</code> | — | Maximum selectable values (multiple/checkbox mode) |\n| <code>nothingFoundMessage</code> | no | <code>React.ReactNode</code> | — | Message when no nodes match search |\n| <code>openOnFocus</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Opens dropdown on focus (searchable mode) |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>scrollAreaProps</code> | no | <code>ScrollAreaProps</code> | — | Props for the ScrollArea in the dropdown |\n| <code>searchValue</code> | no | <code>string</code> | — | Controlled search value |\n| <code>searchable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Enables search filtering |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withLines</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Show tree connection lines between parent and child nodes |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-treeselectoption\"></a>\n### `TreeSelectOption`\n\n- Safety: `wrapped`\n- Category: `navigation`\n- Documentation: [upstream component API](https://mantine.dev/core/tree-select-option/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide an accessible label for controls without visible text.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>chevronAriaLabels</code> | no | <code>TreeSelectChevronAriaLabels</code> | — | — |\n| <code>expanded</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>hasChildren</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>indeterminate</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>isLastChild</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>level</code> | yes | <code>number</code> | — | — |\n| <code>lineGuides</code> | yes | <code>boolean[]</code> | — | — |\n| <code>node</code> | yes | <code>TreeNodeData</code> | — | — |\n| <code>selected</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>showCheckbox</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withLines</code> | yes | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-typography\"></a>\n### `Typography`\n\n- Safety: `wrapped`\n- Category: `layout`\n- Documentation: [upstream component API](https://mantine.dev/core/typography/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Keep visual order consistent with reading order.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-unstyledbutton\"></a>\n### `UnstyledButton`\n\n- Safety: `wrapped`\n- Category: `interaction`\n- Documentation: [upstream component API](https://mantine.dev/core/unstyled-button/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-visuallyhidden\"></a>\n### `VisuallyHidden`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://mantine.dev/core/visually-hidden/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n"
    },
    {
      "path": "references/mantine-dates.md",
      "content": "# Mantine Dates\n\n> Generated from `component-catalog-v1.json`. Catalog schema v1 · Custom Widget 2.0.0 · Mantine 9.4.1. Do not edit this file by hand.\n\nPackage: `@mantine/dates`. Effective props combine the [shared prop API](components.md#shared-prop-api) with each component's specific props below. Component-specific records override shared records with the same name.\n\n## Package guidance\n\nDate bindings are temporary serialized inputs. Persisted locale, time-zone, and date choices belong in widget options. Include a textual date or agenda when a visual date control carries meaning.\n\n## Enabled inventory\n\n<code>Calendar</code>, <code>CalendarHeader</code>, <code>DateInput</code>, <code>DatePicker</code>, <code>DatePickerInput</code>, <code>DateTimePicker</code>, <code>Day</code>, <code>DecadeLevel</code>, <code>DecadeLevelGroup</code>, <code>InlineDateTimePicker</code>, <code>LevelsGroup</code>, <code>MiniCalendar</code>, <code>Month</code>, <code>MonthLevel</code>, <code>MonthLevelGroup</code>, <code>MonthPicker</code>, <code>MonthPickerInput</code>, <code>MonthsList</code>, <code>PickerControl</code>, <code>TimeGrid</code>, <code>TimeInput</code>, <code>TimePicker</code>, <code>TimeValue</code>, <code>WeekdaysRow</code>, <code>YearLevel</code>, <code>YearLevelGroup</code>, <code>YearPicker</code>, <code>YearPickerInput</code>, <code>YearsList</code>\n\n## Denied inventory\n\n<code>DatesProvider</code>, <code>HiddenDatesInput</code>, <code>PickerInputBase</code>\n\n## Component records\n\n<a id=\"component-calendar\"></a>\n### `Calendar`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/calendar/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ month?: Record&lt;string, any&gt;; weekday?: Record&lt;string, any&gt;; weekdaysRow?: Record&lt;string, any&gt;; monthRow?: Record&lt;string, any&gt;; ... 17 more ...; yearsListRow?: Record&lt;...&gt;; }</code> | — | — |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>defaultLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Initial displayed level in uncontrolled mode |\n| <code>enableKeyboardNavigation</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>level</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Current displayed level displayed in controlled mode |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>maxLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Max level that user can go up to (decade, year, month) |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Min level that user can go down to (decade, year, month) |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>static</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-calendarheader\"></a>\n### `CalendarHeader`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/calendar-header/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ calendarHeader?: Record&lt;string, any&gt;; calendarHeaderControl?: Record&lt;string, any&gt;; calendarHeaderLevel?: Record&lt;string, any&gt;; calendarHeaderControlIcon?: Record&lt;...&gt;; }</code> | — | — |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the header should take the full width of its container |\n| <code>hasNextLevel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next level button should be enabled |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Label displayed between next and previous buttons |\n| <code>levelControlAriaLabel</code> | no | <code>string</code> | — | Level control `aria-label` |\n| <code>nextDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables next control |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>previousDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables previous control |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withNext</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next control should be rendered |\n| <code>withPrevious</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether previous control should be rendered |\n\n<a id=\"component-dateinput\"></a>\n### `DateInput`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/date-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the value can be deselected by deleting everything from the input or by clicking the selected date in the dropdown. By default, `true` if `clearable` prop is set, `false` otherwise. |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 30 more ...; presetButton?: Record&lt;...&gt;; }</code> | — | — |\n| <code>clearButtonProps</code> | no | <code>React.DetailedHTMLProps&lt;React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;</code> | — | Props passed down to the clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>defaultLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Initial displayed level (uncontrolled) |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fixOnBlur</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set to `false`, invalid user input is preserved and is not corrected on blur |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the calendar should take the full width of its container |\n| <code>hasNextLevel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next level button should be enabled |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>level</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Current displayed level (controlled) |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>maxLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Max level that user can go up to |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables next control |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>popoverProps</code> | no | <code>Partial&lt;Omit&lt;PopoverProps, \"children\"&gt;&gt;</code> | — | Props passed down to the `Popover` component |\n| <code>presets</code> | no | <code>DatePickerPreset&lt;\"default\"&gt;[]</code> | — | Predefined values to pick from |\n| <code>previousDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables previous control |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>valueFormat</code> | no | <code>string</code> | — | `dayjs` format to display input value, `\"MMMM D, YYYY\"` by default |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withNext</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next control should be rendered |\n| <code>withPrevious</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether previous control should be rendered |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>withTime</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set to `true`, the time part of the value is preserved. Set this to `true` when `valueFormat` includes time (e.g. `\"YYYY-MM-DD HH:mm\"`). |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-datepicker\"></a>\n### `DatePicker`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/date-picker/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `type` is `multiple` or `range`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>(Type extends \"default\" ? boolean : never)</code> | — | Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\" |\n| <code>allowSingleDateInRange</code> | no | <code>(Type extends \"range\" ? boolean : never)</code> | — | Determines whether a single day can be selected as range, applicable only when type=\"range\" |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ month?: Record&lt;string, any&gt;; weekday?: Record&lt;string, any&gt;; weekdaysRow?: Record&lt;string, any&gt;; monthRow?: Record&lt;string, any&gt;; ... 20 more ...; datePickerRoot?: Record&lt;...&gt;; }</code> | — | — |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>defaultLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Initial displayed level (uncontrolled) |\n| <code>enableKeyboardNavigation</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>level</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Current displayed level (controlled) |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>maxLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | — |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>presets</code> | no | <code>DatePickerPreset&lt;Type&gt;[]</code> | — | Predefined values to pick from |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-datepickerinput\"></a>\n### `DatePickerInput`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/date-picker-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `type` is `multiple` or `range`\n- Subcomponents: none\n- Component-specific blocked props: <code>dropdownType</code> — Modal picker mode escapes the widget overlay boundary, <code>modalProps</code> — Modal picker configuration escapes the widget overlay boundary\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>(Type extends \"default\" ? boolean : never)</code> | — | Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\" |\n| <code>allowSingleDateInRange</code> | no | <code>(Type extends \"range\" ? boolean : never)</code> | — | Determines whether a single day can be selected as range, applicable only when type=\"range\" |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 31 more ...; datePickerRoot?: Record&lt;...&gt;; }</code> | — | — |\n| <code>clearButtonProps</code> | no | <code>React.DetailedHTMLProps&lt;React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;</code> | — | Props passed down to the clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. |\n| <code>closeOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"` |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>defaultLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Initial displayed level (uncontrolled) |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>enableKeyboardNavigation</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>labelSeparator</code> | no | <code>string</code> | — | Separator between range value |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>level</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Current displayed level (controlled) |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>maxLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | — |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>popoverProps</code> | no | <code>Partial&lt;Omit&lt;PopoverProps, \"children\"&gt;&gt;</code> | — | Props passed down to `Popover` component |\n| <code>presets</code> | no | <code>DatePickerPreset&lt;Type&gt;[]</code> | — | Predefined values to pick from |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>sortDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\" |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>valueFormat</code> | no | <code>string</code> | — | `dayjs` format for input value |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-datetimepicker\"></a>\n### `DateTimePicker`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/date-time-picker/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `type` is `range`; `multiple` is not supported\n- Subcomponents: none\n- Component-specific blocked props: <code>dropdownType</code> — Modal picker mode escapes the widget overlay boundary, <code>modalProps</code> — Modal picker configuration escapes the widget overlay boundary\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowSingleDateInRange</code> | no | <code>(Type extends \"range\" ? boolean : never)</code> | — | Determines whether a single day can be selected as range, applicable only when type=\"range\" |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 37 more ...; rangeInfo?: Record&lt;...&gt;; }</code> | — | — |\n| <code>clearButtonProps</code> | no | <code>React.DetailedHTMLProps&lt;React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;</code> | — | Props passed down to the clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>defaultLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Initial displayed level in uncontrolled mode |\n| <code>defaultTimeValue</code> | no | <code>string</code> | — | Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>endTimePickerProps</code> | no | <code>Omit&lt;TimePickerProps, \"value\" &#124; \"defaultValue\"&gt;</code> | — | Props passed down to the end time `TimePicker` component in range mode |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the calendar should take the full width of its container |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>labelSeparator</code> | no | <code>string</code> | — | Separator between range values |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>level</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Current displayed level displayed in controlled mode |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>maxLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Max level that user can go up to |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>popoverProps</code> | no | <code>Partial&lt;Omit&lt;PopoverProps, \"children\"&gt;&gt;</code> | — | Props passed down to `Popover` component |\n| <code>presets</code> | no | <code>DatePickerPreset&lt;Type&gt;[]</code> | — | Presets values |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>sortDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\" |\n| <code>submitButtonProps</code> | no | <code>(ActionIconProps &amp; React.ClassAttributes&lt;HTMLButtonElement&gt; &amp; React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;)</code> | — | Props passed down to the submit button |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>timePickerProps</code> | no | <code>Omit&lt;TimePickerProps, \"value\" &#124; \"defaultValue\"&gt;</code> | — | Props passed down to `TimePicker` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSeconds</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the seconds input should be displayed |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-datesprovider\"></a>\n### `DatesProvider`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/dates/dates-provider/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Replaces a Homarr-owned provider boundary.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-day\"></a>\n### `Day`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/day/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ day?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>date</code> | yes | <code>string</code> | — | Date that is displayed in `YYYY-MM-DD` format |\n| <code>firstInRange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the day is first in range selection |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the day should take the full width of its cell |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>inRange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the day is selected in range |\n| <code>lastInRange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the day is last in range selection |\n| <code>outside</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the day is outside of the current month |\n| <code>selected</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the day is selected |\n| <code>static</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines which element is used as root, `'button'` by default, `'div'` if static prop is set |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the day is considered to be a weekend |\n\n<a id=\"component-decadelevel\"></a>\n### `DecadeLevel`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/decade-level/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ calendarHeader?: Record&lt;string, any&gt;; calendarHeaderControl?: Record&lt;string, any&gt;; calendarHeaderLevel?: Record&lt;string, any&gt;; ... 4 more ...; yearsListRow?: Record&lt;...&gt;; }</code> | — | — |\n| <code>decade</code> | yes | <code>string</code> | — | Displayed decade |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the calendar should take the full width of its container |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>levelControlAriaLabel</code> | no | <code>string</code> | — | Level control `aria-label` |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>nextDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables next control |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>previousDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables previous control |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withNext</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next control should be rendered |\n| <code>withPrevious</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether previous control should be rendered |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-decadelevelgroup\"></a>\n### `DecadeLevelGroup`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/decade-level-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ calendarHeader?: Record&lt;string, any&gt;; calendarHeaderControl?: Record&lt;string, any&gt;; calendarHeaderLevel?: Record&lt;string, any&gt;; ... 5 more ...; yearsListRow?: Record&lt;...&gt;; }</code> | — | — |\n| <code>decade</code> | yes | <code>string</code> | — | Displayed decade |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the calendar should take the full width of its container |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>nextDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables next control |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns to display next to each other |\n| <code>previousDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables previous control |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-hiddendatesinput\"></a>\n### `HiddenDatesInput`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/dates/hidden-dates-input/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Internal date-input primitive.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-inlinedatetimepicker\"></a>\n### `InlineDateTimePicker`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/inline-date-time-picker/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `type` is `range`; `multiple` is not supported\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>(Type extends \"default\" ? boolean : never)</code> | — | Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\" |\n| <code>allowSingleDateInRange</code> | no | <code>(Type extends \"range\" ? boolean : never)</code> | — | Determines whether a single day can be selected as range, applicable only when type=\"range\" |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; month?: Record&lt;string, any&gt;; weekday?: Record&lt;string, any&gt;; weekdaysRow?: Record&lt;string, any&gt;; ... 27 more ...; rangeInfo?: Record&lt;...&gt;; }</code> | — | — |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>defaultLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Initial displayed level (uncontrolled) |\n| <code>defaultTimeValue</code> | no | <code>string</code> | — | Default time value in `HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. |\n| <code>enableKeyboardNavigation</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Enable enhanced keyboard navigation (Ctrl/Cmd + Arrow keys for year navigation, Ctrl/Cmd + Shift + Arrow keys for decade navigation, Y key to open year view) |\n| <code>endTimePickerProps</code> | no | <code>Omit&lt;TimePickerProps, \"value\" &#124; \"defaultValue\"&gt;</code> | — | Props passed down to the end time `TimePicker` component in range mode |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>labelSeparator</code> | no | <code>string</code> | — | Separator between range values |\n| <code>level</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Current displayed level (controlled) |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Max date |\n| <code>maxLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | — |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Min date |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>presets</code> | no | <code>DatePickerPreset&lt;Type&gt;[]</code> | — | Predefined values to pick from |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>submitButtonProps</code> | no | <code>(ActionIconProps &amp; React.ClassAttributes&lt;HTMLButtonElement&gt; &amp; React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;)</code> | — | Props passed down to the submit button |\n| <code>timePickerProps</code> | no | <code>Omit&lt;TimePickerProps, \"value\" &#124; \"defaultValue\"&gt;</code> | — | Props passed down to `TimePicker` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withSeconds</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the seconds input should be displayed |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-levelsgroup\"></a>\n### `LevelsGroup`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/levels-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ levelsGroup?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the group should take the full width of its container |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-minicalendar\"></a>\n### `MiniCalendar`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/mini-calendar/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; control?: Record&lt;string, any&gt;; day?: Record&lt;string, any&gt;; days?: Record&lt;string, any&gt;; dayMonth?: Record&lt;...&gt;; dayNumber?: Record&lt;...&gt;; }</code> | — | — |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Controlled component date value, start date of the interval |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Uncontrolled component default value, start date of the interval |\n| <code>locale</code> | no | <code>string</code> | — | dayjs locale used for formatting |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum date that can be selected, date object or date string in `YYYY-MM-DD` format |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum date that can be selected, date object or date string in `YYYY-MM-DD` format |\n| <code>monthLabelFormat</code> | no | <code>string</code> | — | Dayjs format string for month label |\n| <code>nextControlProps</code> | no | <code>(React.ClassAttributes&lt;HTMLButtonElement&gt; &amp; React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt; &amp; DataAttributes)</code> | — | Props passed to next control button |\n| <code>numberOfDays</code> | no | <code>number</code> | — | Number of days to display in the calendar |\n| <code>previousControlProps</code> | no | <code>(React.ClassAttributes&lt;HTMLButtonElement&gt; &amp; React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt; &amp; DataAttributes)</code> | — | Props passed to previous control button |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-month\"></a>\n### `Month`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/month/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ month?: Record&lt;string, any&gt;; weekday?: Record&lt;string, any&gt;; weekdaysRow?: Record&lt;string, any&gt;; monthRow?: Record&lt;string, any&gt;; ... 4 more ...; day?: Record&lt;...&gt;; }</code> | — | — |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the month should take the full width of its container |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>locale</code> | no | <code>string</code> | — | `dayjs` locale, the default value is defined by `DatesProvider` |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date, in `YYYY-MM-DD` format |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date, in `YYYY-MM-DD` format |\n| <code>month</code> | yes | <code>string</code> | — | Month to display, value `YYYY-MM-DD` |\n| <code>static</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated by space |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n\n<a id=\"component-monthlevel\"></a>\n### `MonthLevel`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/month-level/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ month?: Record&lt;string, any&gt;; weekday?: Record&lt;string, any&gt;; weekdaysRow?: Record&lt;string, any&gt;; monthRow?: Record&lt;string, any&gt;; ... 8 more ...; calendarHeaderControlIcon?: Record&lt;...&gt;; }</code> | — | — |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the calendar should take the full width of its container |\n| <code>hasNextLevel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next level button should be enabled |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>levelControlAriaLabel</code> | no | <code>string</code> | — | Aria-label for change level control |\n| <code>locale</code> | no | <code>string</code> | — | `dayjs` locale, the default value is defined by `DatesProvider` |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date, in `YYYY-MM-DD` format |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date, in `YYYY-MM-DD` format |\n| <code>month</code> | yes | <code>string</code> | — | Month that is currently displayed |\n| <code>nextDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables next control |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>previousDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables previous control |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>static</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated by space |\n| <code>withNext</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next control should be rendered |\n| <code>withPrevious</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether previous control should be rendered |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n\n<a id=\"component-monthlevelgroup\"></a>\n### `MonthLevelGroup`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/month-level-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ month?: Record&lt;string, any&gt;; weekday?: Record&lt;string, any&gt;; weekdaysRow?: Record&lt;string, any&gt;; monthRow?: Record&lt;string, any&gt;; ... 9 more ...; levelsGroup?: Record&lt;...&gt;; }</code> | — | — |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, where 0 – Sunday and 6 – Saturday. |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the calendar should take the full width of its container |\n| <code>hasNextLevel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next level button should be enabled |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>hideOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether outside dates should be hidden |\n| <code>hideWeekdays</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether weekdays row should be hidden |\n| <code>highlightToday</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether today should be highlighted with a border |\n| <code>locale</code> | no | <code>string</code> | — | `dayjs` locale, the default value is defined by `DatesProvider` |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date, in `YYYY-MM-DD` format |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date, in `YYYY-MM-DD` format |\n| <code>month</code> | yes | <code>string</code> | — | Month to display |\n| <code>nextDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables next control |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns to display next to each other |\n| <code>previousDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables previous control |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>static</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Passed as `isStatic` prop to `Month` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekendDays</code> | no | <code>DayOfWeek[]</code> | — | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated by space |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether week numbers should be displayed |\n\n<a id=\"component-monthpicker\"></a>\n### `MonthPicker`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/month-picker/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `type` is `multiple` or `range`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>(Type extends \"default\" ? boolean : never)</code> | — | Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\" |\n| <code>allowSingleDateInRange</code> | no | <code>(Type extends \"range\" ? boolean : never)</code> | — | Determines whether a single day can be selected as range, applicable only when type=\"range\" |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ calendarHeader?: Record&lt;string, any&gt;; calendarHeaderControl?: Record&lt;string, any&gt;; calendarHeaderLevel?: Record&lt;string, any&gt;; ... 12 more ...; monthPickerRoot?: Record&lt;...&gt;; }</code> | — | — |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>defaultLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Initial displayed level (uncontrolled) |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>level</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Current displayed level (controlled) |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>maxLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Max level that user can go up to |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>presets</code> | no | <code>MonthPickerPreset&lt;Type&gt;[]</code> | — | Predefined values to pick from |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-monthpickerinput\"></a>\n### `MonthPickerInput`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/month-picker-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `type` is `multiple` or `range`\n- Subcomponents: none\n- Component-specific blocked props: <code>dropdownType</code> — Modal picker mode escapes the widget overlay boundary, <code>modalProps</code> — Modal picker configuration escapes the widget overlay boundary\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>(Type extends \"default\" ? boolean : never)</code> | — | Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\" |\n| <code>allowSingleDateInRange</code> | no | <code>(Type extends \"range\" ? boolean : never)</code> | — | Determines whether a single day can be selected as range, applicable only when type=\"range\" |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 22 more ...; monthPickerRoot?: Record&lt;...&gt;; }</code> | — | — |\n| <code>clearButtonProps</code> | no | <code>React.DetailedHTMLProps&lt;React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;</code> | — | Props passed down to the clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. |\n| <code>closeOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"` |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>defaultLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Initial displayed level (uncontrolled) |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>labelSeparator</code> | no | <code>string</code> | — | Separator between range value |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>level</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Current displayed level (controlled) |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>maxLevel</code> | no | <code>\"month\" &#124; \"year\" &#124; \"decade\"</code> | <code>\"decade\"</code>, <code>\"month\"</code>, <code>\"year\"</code> | Max level that user can go up to |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>popoverProps</code> | no | <code>Partial&lt;Omit&lt;PopoverProps, \"children\"&gt;&gt;</code> | — | Props passed down to `Popover` component |\n| <code>presets</code> | no | <code>MonthPickerPreset&lt;Type&gt;[]</code> | — | Predefined values to pick from |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>sortDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\" |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>valueFormat</code> | no | <code>string</code> | — | `dayjs` format for input value |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-monthslist\"></a>\n### `MonthsList`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/months-list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ monthsList?: Record&lt;string, any&gt;; monthsListCell?: Record&lt;string, any&gt;; monthsListRow?: Record&lt;string, any&gt;; monthsListControl?: Record&lt;...&gt;; }</code> | — | — |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>year</code> | yes | <code>string</code> | — | Year for which months list should be displayed |\n\n<a id=\"component-pickercontrol\"></a>\n### `PickerControl`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/picker-control/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ pickerControl?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>firstInRange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Assigns first in range styles |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the control should take the full width of its cell |\n| <code>inRange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Assigns in range styles |\n| <code>lastInRange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Assigns last in range styles |\n| <code>selected</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Assigns selected styles |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-pickerinputbase\"></a>\n### `PickerInputBase`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/dates/picker-input-base/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Internal date-input primitive.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-timegrid\"></a>\n### `TimeGrid`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/time-grid/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the value can be deselected when the current active option is clicked or activated with keyboard |\n| <code>amPmLabels</code> | no | <code>TimePickerAmPmLabels</code> | — | Labels used for am/pm values |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; control?: Record&lt;string, any&gt;; simpleGrid?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>data</code> | yes | <code>string[]</code> | — | Time data in 24h format to be displayed in the grid, for example `['10:00', '18:30', '22:00']`. Time values must be unique. |\n| <code>maxTime</code> | no | <code>string</code> | — | All controls after this time are disabled |\n| <code>minTime</code> | no | <code>string</code> | — | All controls before this time are disabled |\n| <code>simpleGridProps</code> | no | <code>SimpleGridProps</code> | — | Props passed down to the underlying `SimpleGrid` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withSeconds</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the seconds part should be displayed |\n\n<a id=\"component-timeinput\"></a>\n### `TimeInput`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/time-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 5 more ...; bottomSection?: Record&lt;...&gt;; }</code> | — | — |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxTime</code> | no | <code>string</code> | — | Maximum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm |\n| <code>minTime</code> | no | <code>string</code> | — | Minimum possible string time, if `withSeconds` is true, time should be in format HH:mm:ss, otherwise HH:mm |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSeconds</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether seconds input should be displayed |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-timepicker\"></a>\n### `TimePicker`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/time-picker/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>amPmInputLabel</code> | no | <code>string</code> | — | `aria-label` of am/pm input |\n| <code>amPmLabels</code> | no | <code>TimePickerAmPmLabels</code> | — | Labels used for am/pm values |\n| <code>amPmSelectProps</code> | no | <code>(React.ClassAttributes&lt;HTMLSelectElement&gt; &amp; React.SelectHTMLAttributes&lt;HTMLSelectElement&gt; &amp; DataAttributes)</code> | — | Props passed down to am/pm select |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 17 more ...; presetControl?: Record&lt;...&gt;; }</code> | — | — |\n| <code>clearButtonProps</code> | no | <code>(CloseButtonProps &amp; ElementProps&lt;\"button\"&gt; &amp; DataAttributes)</code> | — | Props passed down to clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the clear button should be displayed |\n| <code>closeDropdownOnPresetSelect</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the dropdown is closed when a value is selected from the presets list |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>hiddenInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props passed down to the hidden input |\n| <code>hoursInputLabel</code> | no | <code>string</code> | — | `aria-label` of hours input |\n| <code>hoursInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props passed down to hours input |\n| <code>hoursPlaceholder</code> | no | <code>string</code> | — | Hours input placeholder, |\n| <code>hoursStep</code> | no | <code>number</code> | — | Number by which hours are incremented/decremented |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>maxDropdownContentHeight</code> | no | <code>number</code> | — | Maximum height of the content displayed in the dropdown in px |\n| <code>minHoursDigits</code> | no | <code>number</code> | — | Minimum number of digits displayed in the hours input, applicable only when `type=\"duration\"` is set |\n| <code>minutesInputLabel</code> | no | <code>string</code> | — | `aria-label` of minutes input |\n| <code>minutesInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props passed down to minutes input |\n| <code>minutesPlaceholder</code> | no | <code>string</code> | — | Minutes input placeholder, |\n| <code>minutesStep</code> | no | <code>number</code> | — | Number by which minutes are incremented/decremented |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>popoverProps</code> | no | <code>PopoverProps</code> | — | Props passed down to `Popover` component |\n| <code>presets</code> | no | <code>TimePickerPresets</code> | — | Time presets to display in the dropdown |\n| <code>reverseTimeControlsList</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the time controls list are reversed, |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>scrollAreaProps</code> | no | <code>ScrollAreaProps</code> | — | Props passed down to all underlying `ScrollArea` components |\n| <code>secondsInputLabel</code> | no | <code>string</code> | — | `aria-label` of seconds input |\n| <code>secondsInputProps</code> | no | <code>(React.ClassAttributes&lt;HTMLInputElement&gt; &amp; React.InputHTMLAttributes&lt;HTMLInputElement&gt; &amp; DataAttributes)</code> | — | Props passed down to seconds input |\n| <code>secondsPlaceholder</code> | no | <code>string</code> | — | Seconds input placeholder, |\n| <code>secondsStep</code> | no | <code>number</code> | — | Number by which seconds are incremented/decremented |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withDropdown</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the dropdown with time controls list should be visible when the input has focus |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSeconds</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the seconds input should be displayed |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n\n<a id=\"component-timevalue\"></a>\n### `TimeValue`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/time-value/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>amPmLabels</code> | no | <code>TimePickerAmPmLabels</code> | — | AM/PM labels |\n| <code>withSeconds</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether seconds should be displayed |\n\n<a id=\"component-weekdaysrow\"></a>\n### `WeekdaysRow`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/weekdays-row/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ weekday?: Record&lt;string, any&gt;; weekdaysRow?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>cellComponent</code> | no | <code>\"td\" &#124; \"th\"</code> | <code>\"td\"</code>, <code>\"th\"</code> | Sets cell type that is used for weekdays |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | Number 0-6, 0 – Sunday, 6 – Saturday |\n| <code>locale</code> | no | <code>string</code> | — | dayjs locale |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withWeekNumbers</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, heading for week numbers is displayed |\n\n<a id=\"component-yearlevel\"></a>\n### `YearLevel`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/year-level/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ calendarHeader?: Record&lt;string, any&gt;; calendarHeaderControl?: Record&lt;string, any&gt;; calendarHeaderLevel?: Record&lt;string, any&gt;; ... 4 more ...; monthsListControl?: Record&lt;...&gt;; }</code> | — | — |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the calendar should take the full width of its container |\n| <code>hasNextLevel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next level button should be enabled |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>levelControlAriaLabel</code> | no | <code>string</code> | — | `aria-label` for change level control |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables next control |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>previousDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables previous control |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withNext</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next control should be rendered |\n| <code>withPrevious</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether previous control should be rendered |\n| <code>year</code> | yes | <code>string</code> | — | Displayed year value in `YYYY-MM-DD` format |\n\n<a id=\"component-yearlevelgroup\"></a>\n### `YearLevelGroup`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/year-level-group/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ calendarHeader?: Record&lt;string, any&gt;; calendarHeaderControl?: Record&lt;string, any&gt;; calendarHeaderLevel?: Record&lt;string, any&gt;; ... 5 more ...; monthsListControl?: Record&lt;...&gt;; }</code> | — | — |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the calendar should take the full width of its container |\n| <code>hasNextLevel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether next level button should be enabled |\n| <code>headerControlsOrder</code> | no | <code>(\"next\" &#124; \"previous\" &#124; \"level\")[]</code> | — | Controls order |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>monthsListFormat</code> | no | <code>string</code> | — | `dayjs` format for months list |\n| <code>nextDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables next control |\n| <code>nextIcon</code> | no | <code>React.ReactNode</code> | — | Change next icon |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>previousDisabled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Disables previous control |\n| <code>previousIcon</code> | no | <code>React.ReactNode</code> | — | Change previous icon |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>year</code> | yes | <code>string</code> | — | Displayed year |\n\n<a id=\"component-yearpicker\"></a>\n### `YearPicker`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/year-picker/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `type` is `multiple` or `range`\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>(Type extends \"default\" ? boolean : never)</code> | — | Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\" |\n| <code>allowSingleDateInRange</code> | no | <code>(Type extends \"range\" ? boolean : never)</code> | — | Determines whether a single day can be selected as range, applicable only when type=\"range\" |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ calendarHeader?: Record&lt;string, any&gt;; calendarHeaderControl?: Record&lt;string, any&gt;; calendarHeaderLevel?: Record&lt;string, any&gt;; ... 8 more ...; yearPickerRoot?: Record&lt;...&gt;; }</code> | — | — |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>presets</code> | no | <code>YearPickerPreset&lt;Type&gt;[]</code> | — | Predefined values to pick from |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-yearpickerinput\"></a>\n### `YearPickerInput`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/year-picker-input/)\n- Temporary bind: `string` via `defaultValue`; read from `inputs.<bindName>`; becomes `string[]` when `type` is `multiple` or `range`\n- Subcomponents: none\n- Component-specific blocked props: <code>dropdownType</code> — Modal picker mode escapes the widget overlay boundary, <code>modalProps</code> — Modal picker configuration escapes the widget overlay boundary\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>allowDeselect</code> | no | <code>(Type extends \"default\" ? boolean : never)</code> | — | Determines whether user can deselect the date by clicking on selected item, applicable only when type=\"default\" |\n| <code>allowSingleDateInRange</code> | no | <code>(Type extends \"range\" ? boolean : never)</code> | — | Determines whether a single day can be selected as range, applicable only when type=\"range\" |\n| <code>ariaLabels</code> | no | <code>CalendarAriaLabels</code> | — | `aria-label` attributes for controls on different levels |\n| <code>attributes</code> | no | <code>{ input?: Record&lt;string, any&gt;; label?: Record&lt;string, any&gt;; section?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 18 more ...; yearPickerRoot?: Record&lt;...&gt;; }</code> | — | — |\n| <code>clearButtonProps</code> | no | <code>React.DetailedHTMLProps&lt;React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;</code> | — | Props passed down to the clear button |\n| <code>clearSectionMode</code> | no | <code>\"both\" &#124; \"rightSection\" &#124; \"clear\"</code> | <code>\"both\"</code>, <code>\"clear\"</code>, <code>\"rightSection\"</code> | Determines how the clear button and rightSection are rendered |\n| <code>clearable</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. |\n| <code>closeOnChange</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the dropdown is closed when date is selected, not applicable with `type=\"multiple\"` |\n| <code>columnsToScroll</code> | no | <code>number</code> | — | Number of columns to scroll with next/prev buttons, same as `numberOfColumns` if not set explicitly |\n| <code>date</code> | no | <code>string &#124; Date</code> | — | Displayed date in controlled mode |\n| <code>defaultDate</code> | no | <code>string &#124; Date</code> | — | Initial displayed date in uncontrolled mode |\n| <code>description</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Description` component. If not set, description is not displayed. |\n| <code>descriptionProps</code> | no | <code>(InputDescriptionProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Description` component |\n| <code>error</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Error` component. If not set, error is not displayed. |\n| <code>errorProps</code> | no | <code>(InputErrorProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Error` component |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>inputSize</code> | no | <code>string</code> | — | HTML `size` attribute for the input element (number of visible characters) |\n| <code>inputWrapperOrder</code> | no | <code>(\"input\" &#124; \"label\" &#124; \"description\" &#124; \"error\")[]</code> | — | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Label` component. If not set, label is not displayed. |\n| <code>labelProps</code> | no | <code>(InputLabelProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Label` component |\n| <code>labelSeparator</code> | no | <code>string</code> | — | Separator between range value |\n| <code>leftSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the left side of the input |\n| <code>leftSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>leftSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `leftSection` element |\n| <code>leftSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |\n| <code>loading</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Displays loading indicator in the left or right section |\n| <code>loadingPosition</code> | no | <code>\"left\" &#124; \"right\"</code> | <code>\"left\"</code>, <code>\"right\"</code> | Position of the loading indicator |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>nextLabel</code> | no | <code>string</code> | — | Next button `aria-label` |\n| <code>numberOfColumns</code> | no | <code>number</code> | — | Number of columns displayed next to each other |\n| <code>pointer</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). |\n| <code>popoverProps</code> | no | <code>Partial&lt;Omit&lt;PopoverProps, \"children\"&gt;&gt;</code> | — | Props passed down to `Popover` component |\n| <code>presets</code> | no | <code>YearPickerPreset&lt;Type&gt;[]</code> | — | Predefined values to pick from |\n| <code>previousLabel</code> | no | <code>string</code> | — | Previous button `aria-label` |\n| <code>rightSection</code> | no | <code>React.ReactNode</code> | — | Content section displayed on the right side of the input |\n| <code>rightSectionPointerEvents</code> | no | <code>\"-moz-initial\" &#124; \"inherit\" &#124; \"initial\" &#124; \"revert\" &#124; \"revert-layer\" &#124; \"unset\" &#124; \"none\" &#124; \"auto\" &#124; \"all\" &#124; \"fill\" &#124; \"stroke\" &#124; \"painted\" &#124; \"visible\" &#124; \"visibleFill\" &#124; \"visiblePainted\" &#124; \"visibleStroke\"</code> | <code>\"-moz-initial\"</code>, <code>\"all\"</code>, <code>\"auto\"</code>, <code>\"fill\"</code>, <code>\"inherit\"</code>, <code>\"initial\"</code>, <code>\"none\"</code>, <code>\"painted\"</code>, <code>\"revert\"</code>, <code>\"revert-layer\"</code>, <code>\"stroke\"</code>, <code>\"unset\"</code>, <code>\"visible\"</code>, <code>\"visibleFill\"</code>, <code>\"visiblePainted\"</code>, <code>\"visibleStroke\"</code> | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |\n| <code>rightSectionProps</code> | no | <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code> | — | Props passed down to the `rightSection` element |\n| <code>rightSectionWidth</code> | no | <code>Property.Width&lt;string &#124; number&gt;</code> | — | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |\n| <code>sortDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dates values should be sorted before `onChange` call, only applicable with type=\"multiple\" |\n| <code>success</code> | no | <code>React.ReactNode</code> | — | Contents of `Input.Success` component. If not set, success is not displayed. |\n| <code>successProps</code> | no | <code>(InputSuccessProps &amp; DataAttributes)</code> | — | Props passed down to the `Input.Success` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>valueFormat</code> | no | <code>string</code> | — | `dayjs` format to display input value |\n| <code>withAsterisk</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>withErrorStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have red border and red text color when the `error` prop is set |\n| <code>withSuccessStyles</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the input should have green border when the `success` prop is set |\n| <code>wrapperProps</code> | no | <code>WrapperProps</code> | — | Props passed down to the root element |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n\n<a id=\"component-yearslist\"></a>\n### `YearsList`\n\n- Safety: `wrapped`\n- Category: `dates`\n- Documentation: [upstream component API](https://mantine.dev/dates/years-list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a textual date when the visual calendar carries meaning.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ yearsListControl?: Record&lt;string, any&gt;; yearsList?: Record&lt;string, any&gt;; yearsListCell?: Record&lt;string, any&gt;; yearsListRow?: Record&lt;...&gt;; }</code> | — | — |\n| <code>decade</code> | yes | <code>string</code> | — | Decade value to display |\n| <code>fullWidth</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the list should take the full width of its container |\n| <code>locale</code> | no | <code>string</code> | — | Dayjs locale, defaults to value defined in DatesProvider |\n| <code>maxDate</code> | no | <code>string &#124; Date</code> | — | Maximum possible date in `YYYY-MM-DD` format or Date object |\n| <code>minDate</code> | no | <code>string &#124; Date</code> | — | Minimum possible date in `YYYY-MM-DD` format or Date object |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withCellSpacing</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether controls should be separated |\n| <code>yearsListFormat</code> | no | <code>string</code> | — | dayjs format for years list |\n"
    },
    {
      "path": "references/mantine-charts.md",
      "content": "# Mantine Charts\n\n> Generated from `component-catalog-v1.json`. Catalog schema v1 · Custom Widget 2.0.0 · Mantine 9.4.1. Do not edit this file by hand.\n\nPackage: `@mantine/charts`. Effective props combine the [shared prop API](components.md#shared-prop-api) with each component's specific props below. Component-specific records override shared records with the same name.\n\n## Package guidance\n\nPass sanitized JSON data through serializable props. Use [immutable local `const` blocks](runtime.md#immutable-local-bindings) for repeated derived chart values; authored formatters and renderer callbacks remain blocked. Include a textual summary and do not rely on color alone.\n\n## Enabled inventory\n\n<code>AreaChart</code>, <code>BarChart</code>, <code>BarsList</code>, <code>BubbleChart</code>, <code>ChartLegend</code>, <code>ChartTooltip</code>, <code>CompositeChart</code>, <code>DonutChart</code>, <code>FunnelChart</code>, <code>Heatmap</code>, <code>LineChart</code>, <code>PieChart</code>, <code>RadarChart</code>, <code>RadialBarChart</code>, <code>SankeyChart</code>, <code>ScatterChart</code>, <code>Sparkline</code>, <code>Treemap</code>\n\n## Denied inventory\n\n<code>AreaGradient</code>\n\n## Component records\n\n<a id=\"component-areachart\"></a>\n### `AreaChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/area-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>activeDotProps</code> | no | <code>MantineChartDotProps</code> | — | Props passed down to all active dots. Ignored if `withDots={false}` is set. |\n| <code>areaChartProps</code> | no | <code>(CartesianChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts `AreaChart` component |\n| <code>attributes</code> | no | <code>{ area?: Record&lt;string, any&gt;; legend?: Record&lt;string, any&gt;; grid?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 14 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>connectNulls</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, points with `null` values are connected |\n| <code>curveType</code> | no | <code>\"step\" &#124; \"bump\" &#124; \"linear\" &#124; \"natural\" &#124; \"monotone\" &#124; \"stepBefore\" &#124; \"stepAfter\"</code> | <code>\"bump\"</code>, <code>\"linear\"</code>, <code>\"monotone\"</code>, <code>\"natural\"</code>, <code>\"step\"</code>, <code>\"stepAfter\"</code>, <code>\"stepBefore\"</code> | Type of the curve |\n| <code>data</code> | yes | <code>ChartData</code> | — | Data used to display chart |\n| <code>dataKey</code> | yes | <code>string</code> | — | Key of the `data` object for x-axis values |\n| <code>dotProps</code> | no | <code>MantineChartDotProps</code> | — | Props passed down to all dots. Ignored if `withDots={false}` is set. |\n| <code>gridAxis</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which lines should be displayed in the grid, `'x'` by default |\n| <code>gridColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the grid and cursor lines, by default depends on color scheme |\n| <code>gridProps</code> | no | <code>Omit&lt;CartesianGridProps, \"ref\"&gt;</code> | — | Props passed down to the `CartesianGrid` component |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to the `Legend` component |\n| <code>referenceLines</code> | no | <code>ChartReferenceLineProps[]</code> | — | Reference lines that should be displayed on the chart |\n| <code>rightYAxisLabel</code> | no | <code>string</code> | — | A label to display next to the right y-axis |\n| <code>rightYAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component rendered on the right side |\n| <code>series</code> | yes | <code>AreaChartSeries[]</code> | — | An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. |\n| <code>splitColors</code> | no | <code>[DefaultMantineColor, DefaultMantineColor]</code> | — | A tuple of colors used when `type=\"split\"` is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors |\n| <code>splitOffset</code> | no | <code>number</code> | — | Offset for the split gradient. By default, value is inferred from `data` and `series` if possible. Must be generated from the data array with `getSplitOffset` function. |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the text displayed inside the chart, `'dimmed'` by default |\n| <code>tickLine</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which axis should have tick line, `'y'` by default |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip position animation duration in ms, `0` by default |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to the `Tooltip` component |\n| <code>unit</code> | no | <code>string</code> | — | Unit displayed next to each tick in y-axis |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withDots</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dots should be displayed |\n| <code>withGradient</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the chart area should be represented with a gradient instead of the solid color |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart legend should be displayed, `false` by default |\n| <code>withPointLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, each point has an associated label |\n| <code>withRightYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart tooltip should be displayed, `true` by default |\n| <code>withXAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether x-axis should be displayed, `true` by default |\n| <code>withYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether y-axis should be displayed, `true` by default |\n| <code>xAxisLabel</code> | no | <code>string</code> | — | A label to display below the x-axis |\n| <code>xAxisProps</code> | no | <code>Omit&lt;XAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `XAxis` recharts component |\n| <code>yAxisLabel</code> | no | <code>string</code> | — | A label to display next to the y-axis |\n| <code>yAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component |\n\n<a id=\"component-areagradient\"></a>\n### `AreaGradient`\n\n- Safety: `denied`\n- Category: `blocked`\n- Documentation: [upstream component API](https://mantine.dev/charts/area-gradient/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - No additional catalog requirement; preserve semantic labels and text alternatives.\n\nDenied reason: Low-level chart implementation helper.\n\n#### Component-specific props\n\n_No authorable props because this component is denied._\n\n<a id=\"component-barchart\"></a>\n### `BarChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/bar-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; grid?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; ... 14 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>barChartProps</code> | no | <code>(CartesianChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts `BarChart` component |\n| <code>barLabelColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of the bar label, by default the value is determined by the chart orientation |\n| <code>cursorFill</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Fill of hovered bar section, by default value is based on color scheme |\n| <code>data</code> | yes | <code>Record&lt;string, any&gt;[]</code> | — | Data used to display chart. |\n| <code>dataKey</code> | yes | <code>string</code> | — | Key of the `data` object for x-axis values |\n| <code>gridAxis</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which lines should be displayed in the grid, `'x'` by default |\n| <code>gridColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the grid and cursor lines, by default depends on color scheme |\n| <code>gridProps</code> | no | <code>Omit&lt;CartesianGridProps, \"ref\"&gt;</code> | — | Props passed down to the `CartesianGrid` component |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to the `Legend` component |\n| <code>maxBarWidth</code> | no | <code>number</code> | — | Maximum bar width in px |\n| <code>minBarSize</code> | no | <code>number</code> | — | Sets minimum height of the bar in px |\n| <code>referenceLines</code> | no | <code>ChartReferenceLineProps[]</code> | — | Reference lines that should be displayed on the chart |\n| <code>rightYAxisLabel</code> | no | <code>string</code> | — | A label to display next to the right y-axis |\n| <code>rightYAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component rendered on the right side |\n| <code>series</code> | yes | <code>BarChartSeries[]</code> | — | An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the text displayed inside the chart, `'dimmed'` by default |\n| <code>tickLine</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which axis should have tick line, `'y'` by default |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip position animation duration in ms, `0` by default |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to the `Tooltip` component |\n| <code>unit</code> | no | <code>string</code> | — | Unit displayed next to each tick in y-axis |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withBarValueLabel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type=\"stacked\"` and `type=\"percent\"` |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart legend should be displayed, `false` by default |\n| <code>withRightYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart tooltip should be displayed, `true` by default |\n| <code>withXAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether x-axis should be displayed, `true` by default |\n| <code>withYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether y-axis should be displayed, `true` by default |\n| <code>xAxisLabel</code> | no | <code>string</code> | — | A label to display below the x-axis |\n| <code>xAxisProps</code> | no | <code>Omit&lt;XAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `XAxis` recharts component |\n| <code>yAxisLabel</code> | no | <code>string</code> | — | A label to display next to the y-axis |\n| <code>yAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component |\n\n<a id=\"component-barslist\"></a>\n### `BarsList`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/bars-list/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; bar?: Record&lt;string, any&gt;; barLabel?: Record&lt;string, any&gt;; barValue?: Record&lt;string, any&gt;; labelsRow?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, adjusts text color based on background color |\n| <code>barColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Default bar background color, used when item does not have color specified |\n| <code>barGap</code> | no | <code>MantineSpacing</code> | <code>\"lg\"</code>, <code>\"md\"</code>, <code>\"sm\"</code>, <code>\"xl\"</code>, <code>\"xs\"</code> | Controls gap between bars |\n| <code>barHeight</code> | no | <code>string &#124; number</code> | — | Bar height |\n| <code>barTextColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Bar text color, overrides autoContrast |\n| <code>barsLabel</code> | no | <code>string</code> | — | Label displayed above the bars column |\n| <code>data</code> | yes | <code>BarsListBarData[]</code> | — | Data for bars |\n| <code>minBarSize</code> | no | <code>string &#124; number</code> | — | Minimum bar width |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>valueLabel</code> | no | <code>string</code> | — | Label displayed above the values column |\n\n<a id=\"component-bubblechart\"></a>\n### `BubbleChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/bubble-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; axis?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>data</code> | yes | <code>Record&lt;string, any&gt;[]</code> | — | Chart data |\n| <code>dataKey</code> | yes | <code>BubbleChartDataKey</code> | — | Data keys for x, y and z axis |\n| <code>gridColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the grid and cursor lines, by default depends on color scheme |\n| <code>label</code> | no | <code>string</code> | — | Chart label displayed next to the x axis |\n| <code>range</code> | yes | <code>[number, number]</code> | — | Z axis range |\n| <code>scatterProps</code> | no | <code>Partial&lt;Omit&lt;ScatterProps, \"ref\"&gt;&gt;</code> | — | Props passed down to the `Scatter` component |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the text displayed inside the chart |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to the `Tooltip` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the tooltip should be displayed |\n| <code>xAxisProps</code> | no | <code>Omit&lt;XAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `XAxis` recharts component |\n| <code>yAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component |\n| <code>zAxisProps</code> | no | <code>Omit&lt;ZAxisProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to the `ZAxis` recharts component |\n\n<a id=\"component-chartlegend\"></a>\n### `ChartLegend`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/chart-legend/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; legendItem?: Record&lt;string, any&gt;; legendItemColor?: Record&lt;string, any&gt;; legendItemName?: Record&lt;...&gt;; }</code> | — | — |\n| <code>centered</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the legend should be centered |\n| <code>legendPosition</code> | yes | <code>\"bottom\" &#124; \"top\" &#124; \"middle\"</code> | <code>\"bottom\"</code>, <code>\"middle\"</code>, <code>\"top\"</code> | Position of the legend relative to the chart, used to apply margin on the corresponding side |\n| <code>payload</code> | no | <code>readonly Record&lt;string, any&gt;[]</code> | — | Chart data provided by recharts |\n| <code>series</code> | no | <code>ChartSeries[]</code> | — | Data used for labels, only applicable for area charts: AreaChart, LineChart, BarChart |\n| <code>showColor</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether color swatch should be shown next to the label |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-charttooltip\"></a>\n### `ChartTooltip`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/chart-tooltip/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ tooltip?: Record&lt;string, any&gt;; tooltipItem?: Record&lt;string, any&gt;; tooltipItemBody?: Record&lt;string, any&gt;; tooltipItemColor?: Record&lt;...&gt;; tooltipItemName?: Record&lt;...&gt;; tooltipItemData?: Record&lt;...&gt;; tooltipLabel?: Record&lt;...&gt;; tool...</code> | — | — |\n| <code>label</code> | no | <code>React.ReactNode</code> | — | Main tooltip label |\n| <code>payload</code> | no | <code>Record&lt;string, any&gt;[] &#124; readonly Record&lt;string, any&gt;[]</code> | — | Chart data provided by recharts |\n| <code>segmentId</code> | no | <code>string &#124; number</code> | — | Segment to display data for, identified by its index in the data array (preferred, isolates duplicate names) or by its name. Only applicable when `type=\"radial\"`. If not set, all data is rendered. |\n| <code>series</code> | no | <code>ChartSeries[]</code> | — | Chart series data, applicable only for `area` type |\n| <code>showColor</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the color swatch should be visible |\n| <code>unit</code> | no | <code>string</code> | — | Data units, provided by parent component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n\n<a id=\"component-compositechart\"></a>\n### `CompositeChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/composite-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>activeDotProps</code> | no | <code>MantineChartDotProps</code> | — | Props passed down to all active dots. Ignored if `withDots={false}` is set. |\n| <code>attributes</code> | no | <code>{ area?: Record&lt;string, any&gt;; legend?: Record&lt;string, any&gt;; line?: Record&lt;string, any&gt;; grid?: Record&lt;string, any&gt;; ... 16 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>composedChartProps</code> | no | <code>(CartesianChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts `AreaChart` component |\n| <code>connectNulls</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether points with `null` values should be connected |\n| <code>curveType</code> | no | <code>\"step\" &#124; \"bump\" &#124; \"linear\" &#124; \"natural\" &#124; \"monotone\" &#124; \"stepBefore\" &#124; \"stepAfter\"</code> | <code>\"bump\"</code>, <code>\"linear\"</code>, <code>\"monotone\"</code>, <code>\"natural\"</code>, <code>\"step\"</code>, <code>\"stepAfter\"</code>, <code>\"stepBefore\"</code> | Type of the curve |\n| <code>data</code> | yes | <code>Record&lt;string, any&gt;[]</code> | — | Data used to display chart |\n| <code>dataKey</code> | yes | <code>string</code> | — | Key of the `data` object for x-axis values |\n| <code>dotProps</code> | no | <code>MantineChartDotProps</code> | — | Props passed down to all dots. Ignored if `withDots={false}` is set. |\n| <code>gridAxis</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which lines should be displayed in the grid, `'x'` by default |\n| <code>gridColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the grid and cursor lines, by default depends on color scheme |\n| <code>gridProps</code> | no | <code>Omit&lt;CartesianGridProps, \"ref\"&gt;</code> | — | Props passed down to the `CartesianGrid` component |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to the `Legend` component |\n| <code>maxBarWidth</code> | no | <code>number</code> | — | Maximum bar width in px |\n| <code>minBarSize</code> | no | <code>number</code> | — | Sets minimum height of the bar in px |\n| <code>referenceLines</code> | no | <code>ChartReferenceLineProps[]</code> | — | Reference lines that should be displayed on the chart |\n| <code>rightYAxisLabel</code> | no | <code>string</code> | — | A label to display next to the right y-axis |\n| <code>rightYAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component rendered on the right side |\n| <code>series</code> | yes | <code>CompositeChartSeries[]</code> | — | An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the text displayed inside the chart, `'dimmed'` by default |\n| <code>tickLine</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which axis should have tick line, `'y'` by default |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip position animation duration in ms, `0` by default |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to the `Tooltip` component |\n| <code>unit</code> | no | <code>string</code> | — | Unit displayed next to each tick in y-axis |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withBarValueLabel</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether a label with bar value should be displayed on top of each bar |\n| <code>withDots</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dots should be displayed |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart legend should be displayed, `false` by default |\n| <code>withPointLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether each point should have associated label |\n| <code>withRightYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart tooltip should be displayed, `true` by default |\n| <code>withXAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether x-axis should be displayed, `true` by default |\n| <code>withYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether y-axis should be displayed, `true` by default |\n| <code>xAxisLabel</code> | no | <code>string</code> | — | A label to display below the x-axis |\n| <code>xAxisProps</code> | no | <code>Omit&lt;XAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `XAxis` recharts component |\n| <code>yAxisLabel</code> | no | <code>string</code> | — | A label to display next to the y-axis |\n| <code>yAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component |\n\n<a id=\"component-donutchart\"></a>\n### `DonutChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/donut-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ label?: Record&lt;string, any&gt;; legend?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; ... 9 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>chartLabel</code> | no | <code>string &#124; number</code> | — | Chart label, displayed in the center of the chart |\n| <code>data</code> | yes | <code>DonutChartCell[]</code> | — | Data used to render chart |\n| <code>endAngle</code> | no | <code>number</code> | — | Controls angle at which charts ends. Set to `0` to render the chart as semicircle. |\n| <code>labelColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls text color of all labels, by default depends on color scheme |\n| <code>labelsType</code> | no | <code>\"value\" &#124; \"name\" &#124; \"percent\"</code> | <code>\"name\"</code>, <code>\"percent\"</code>, <code>\"value\"</code> | Type of labels to display, `'value'` by default |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to recharts `Legend` component |\n| <code>paddingAngle</code> | no | <code>number</code> | — | Controls padding between segments |\n| <code>pieChartProps</code> | no | <code>(PolarChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts `PieChart` component |\n| <code>pieProps</code> | no | <code>Partial&lt;Omit&lt;PieProps, \"ref\"&gt;&gt;</code> | — | Props passed down to recharts `Pie` component |\n| <code>startAngle</code> | no | <code>number</code> | — | Controls angle at which chart starts. Set to `180` to render the chart as semicircle. |\n| <code>strokeColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of the segments stroke, by default depends on color scheme |\n| <code>thickness</code> | no | <code>number</code> | — | Controls thickness of the chart segments |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip animation duration in ms |\n| <code>tooltipDataSource</code> | no | <code>\"all\" &#124; \"segment\"</code> | <code>\"all\"</code>, <code>\"segment\"</code> | Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to `Tooltip` recharts component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether each segment should have associated label |\n| <code>withLabelsLine</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether segments labels should have lines that connect the segment with the label |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the legend should be displayed |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the tooltip should be displayed when one of the section is hovered |\n\n<a id=\"component-funnelchart\"></a>\n### `FunnelChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/funnel-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; legendItem?: Record&lt;string, any&gt;; ... 8 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>data</code> | yes | <code>FunnelChartCell[]</code> | — | Data used to render chart |\n| <code>funnelChartProps</code> | no | <code>(CartesianChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts `FunnelChart` component |\n| <code>funnelProps</code> | no | <code>Partial&lt;Omit&lt;FunnelProps, \"ref\"&gt;&gt;</code> | — | Props passed down to recharts `Pie` component |\n| <code>labelColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls text color of all labels |\n| <code>labelsPosition</code> | no | <code>\"left\" &#124; \"right\" &#124; \"inside\"</code> | <code>\"inside\"</code>, <code>\"left\"</code>, <code>\"right\"</code> | Controls labels position relative to the segment |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to recharts `Legend` component |\n| <code>strokeColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of the segments stroke, by default depends on color scheme |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip animation duration in ms |\n| <code>tooltipDataSource</code> | no | <code>\"all\" &#124; \"segment\"</code> | <code>\"all\"</code>, <code>\"segment\"</code> | Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to `Tooltip` recharts component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether each segment should have associated label |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the legend should be displayed |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the tooltip should be displayed when a section is hovered |\n\n<a id=\"component-heatmap\"></a>\n### `Heatmap`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/heatmap/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; rect?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; weekdayLabel?: Record&lt;string, any&gt;; monthLabel?: Record&lt;...&gt;; legendLabel?: Record&lt;...&gt;; legendRect?: Record&lt;...&gt;; }</code> | — | — |\n| <code>colors</code> | no | <code>string[]</code> | — | Colors array, used to calculate color for each value, by default 4 shades of green colors are used |\n| <code>data</code> | yes | <code>Record&lt;string, number&gt;</code> | — | Heatmap data, key is date in `YYYY-MM-DD` format (interpreted as a UTC calendar day) |\n| <code>domain</code> | no | <code>[number, number]</code> | — | Heatmap domain, array of 2 numbers, min and max values, calculated from data by default |\n| <code>endDate</code> | no | <code>string &#124; Date</code> | — | Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day. |\n| <code>firstDayOfWeek</code> | no | <code>0 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6 &#124; 1</code> | <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | First day of week, 0 – Sunday, 1 – Monday. |\n| <code>gap</code> | no | <code>number</code> | — | Gap between rects in px |\n| <code>legendLabels</code> | no | <code>[string, string]</code> | — | Legend labels, array of 2 elements: [min label, max label] |\n| <code>monthLabels</code> | no | <code>string[]</code> | — | Month labels, array of 12 elements, can be used for localization |\n| <code>monthsLabelsHeight</code> | no | <code>number</code> | — | Height of month labels row |\n| <code>rectRadius</code> | no | <code>number</code> | — | Rect radius in px |\n| <code>rectSize</code> | no | <code>number</code> | — | Size of day rect in px |\n| <code>splitMonths</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, inserts a spacer column between months |\n| <code>startDate</code> | no | <code>string &#124; Date</code> | — | Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day. |\n| <code>tooltipProps</code> | no | <code>Partial&lt;TooltipFloatingProps&gt;</code> | — | Props passed down to the `Tooltip.Floating` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>weekdayLabels</code> | no | <code>string[]</code> | — | Weekday labels, array of 7 elements, can be used for localization |\n| <code>weekdaysLabelsWidth</code> | no | <code>number</code> | — | Width of weekday labels column |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, legend with color levels is displayed below the heatmap |\n| <code>withMonthLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, month labels are displayed |\n| <code>withOutsideDates</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, trailing dates that do not fall into the given `startDate` – `endDate` range are displayed to fill empty space. |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, tooltip is displayed on rect hover |\n| <code>withWeekdayLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | If set, weekday labels are displayed |\n\n<a id=\"component-linechart\"></a>\n### `LineChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/line-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>activeDotProps</code> | no | <code>MantineChartDotProps</code> | — | Props passed down to all active dots. Ignored if `withDots={false}` is set. |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; line?: Record&lt;string, any&gt;; grid?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; ... 14 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>connectNulls</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether points with `null` values should be connected |\n| <code>curveType</code> | no | <code>\"step\" &#124; \"bump\" &#124; \"linear\" &#124; \"natural\" &#124; \"monotone\" &#124; \"stepBefore\" &#124; \"stepAfter\"</code> | <code>\"bump\"</code>, <code>\"linear\"</code>, <code>\"monotone\"</code>, <code>\"natural\"</code>, <code>\"step\"</code>, <code>\"stepAfter\"</code>, <code>\"stepBefore\"</code> | Type of the curve |\n| <code>data</code> | yes | <code>Record&lt;string, any&gt;[]</code> | — | Data used to display chart |\n| <code>dataKey</code> | yes | <code>string</code> | — | Key of the `data` object for x-axis values |\n| <code>dotProps</code> | no | <code>MantineChartDotProps</code> | — | Props passed down to all dots. Ignored if `withDots={false}` is set. |\n| <code>gradientStops</code> | no | <code>LineChartGradientStop[]</code> | — | Data used to generate gradient stops |\n| <code>gridAxis</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which lines should be displayed in the grid, `'x'` by default |\n| <code>gridColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the grid and cursor lines, by default depends on color scheme |\n| <code>gridProps</code> | no | <code>Omit&lt;CartesianGridProps, \"ref\"&gt;</code> | — | Props passed down to the `CartesianGrid` component |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to the `Legend` component |\n| <code>lineChartProps</code> | no | <code>(CartesianChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts `LineChart` component |\n| <code>referenceLines</code> | no | <code>ChartReferenceLineProps[]</code> | — | Reference lines that should be displayed on the chart |\n| <code>rightYAxisLabel</code> | no | <code>string</code> | — | A label to display next to the right y-axis |\n| <code>rightYAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component rendered on the right side |\n| <code>series</code> | yes | <code>LineChartSeries[]</code> | — | An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array. |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the text displayed inside the chart, `'dimmed'` by default |\n| <code>tickLine</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which axis should have tick line, `'y'` by default |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip position animation duration in ms, `0` by default |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to the `Tooltip` component |\n| <code>unit</code> | no | <code>string</code> | — | Unit displayed next to each tick in y-axis |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withDots</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dots should be displayed |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart legend should be displayed, `false` by default |\n| <code>withPointLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether each point should have associated label |\n| <code>withRightYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart tooltip should be displayed, `true` by default |\n| <code>withXAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether x-axis should be displayed, `true` by default |\n| <code>withYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether y-axis should be displayed, `true` by default |\n| <code>xAxisLabel</code> | no | <code>string</code> | — | A label to display below the x-axis |\n| <code>xAxisProps</code> | no | <code>Omit&lt;XAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `XAxis` recharts component |\n| <code>yAxisLabel</code> | no | <code>string</code> | — | A label to display next to the y-axis |\n| <code>yAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component |\n\n<a id=\"component-piechart\"></a>\n### `PieChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/pie-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; legendItem?: Record&lt;string, any&gt;; ... 8 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>data</code> | yes | <code>PieChartCell[]</code> | — | Data used to render chart |\n| <code>endAngle</code> | no | <code>number</code> | — | Controls angle at which charts ends. Set to `0` to render the chart as semicircle. |\n| <code>labelColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls text color of all labels, white by default |\n| <code>labelsPosition</code> | no | <code>\"inside\" &#124; \"outside\"</code> | <code>\"inside\"</code>, <code>\"outside\"</code> | Controls labels position relative to the segment |\n| <code>labelsType</code> | no | <code>\"value\" &#124; \"name\" &#124; \"percent\"</code> | <code>\"name\"</code>, <code>\"percent\"</code>, <code>\"value\"</code> | Type of labels to display |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to recharts `Legend` component |\n| <code>paddingAngle</code> | no | <code>number</code> | — | Controls padding between segments |\n| <code>pieChartProps</code> | no | <code>(PolarChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts `PieChart` component |\n| <code>pieProps</code> | no | <code>Partial&lt;Omit&lt;PieProps, \"ref\"&gt;&gt;</code> | — | Props passed down to recharts `Pie` component |\n| <code>startAngle</code> | no | <code>number</code> | — | Controls angle at which chart starts. Set to `180` to render the chart as semicircle. |\n| <code>strokeColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of the segments stroke, by default depends on color scheme |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip animation duration in ms |\n| <code>tooltipDataSource</code> | no | <code>\"all\" &#124; \"segment\"</code> | <code>\"all\"</code>, <code>\"segment\"</code> | Determines which data is displayed in the tooltip. `'all'` – display all values, `'segment'` – display only hovered segment. |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to `Tooltip` recharts component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether each segment should have associated label |\n| <code>withLabelsLine</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether segments labels should have lines that connect the segment with the label |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the legend should be displayed |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the tooltip should be displayed when one of the section is hovered |\n\n<a id=\"component-radarchart\"></a>\n### `RadarChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/radar-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>activeDotProps</code> | no | <code>MantineChartDotProps</code> | — | Props passed down to all active dots. Ignored if `withDots={false}` is set. |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; container?: Record&lt;string, any&gt;; ... 9 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>data</code> | yes | <code>Record&lt;string, any&gt;[]</code> | — | Data used in the chart |\n| <code>dataKey</code> | yes | <code>string</code> | — | Key of the `data` object for axis values |\n| <code>dotProps</code> | no | <code>MantineChartDotProps</code> | — | Props passed down to all dots. Ignored if `withDots={false}` is set. |\n| <code>gridColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of the grid lines. By default, color depends on the color scheme. |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to recharts Legend component |\n| <code>polarAngleAxisProps</code> | no | <code>Omit&lt;PolarAngleAxisProps, \"ref\"&gt;</code> | — | Props passed down to recharts PolarAngleAxis component |\n| <code>polarGridProps</code> | no | <code>Omit&lt;PolarGridProps, \"ref\"&gt;</code> | — | Props passed down to recharts PolarGrid component |\n| <code>polarRadiusAxisProps</code> | no | <code>Omit&lt;PolarRadiusAxisProps, \"ref\"&gt;</code> | — | Props passed down to recharts PolarRadiusAxis component |\n| <code>radarChartProps</code> | no | <code>(PolarChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts RadarChart component |\n| <code>series</code> | yes | <code>RadarChartSeries[]</code> | — | Determines which data should be consumed from the `data` array. |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of all text elements. By default, color depends on the color scheme. |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip position animation duration in ms |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to recharts Tooltip component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withDots</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether dots should be displayed |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the legend should be displayed |\n| <code>withPolarAngleAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether PolarAngleAxis component should be displayed |\n| <code>withPolarGrid</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether PolarGrid component should be displayed |\n| <code>withPolarRadiusAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether PolarRadiusAxisProps component should be displayed |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether Tooltip component should be displayed |\n\n<a id=\"component-radialbarchart\"></a>\n### `RadialBarChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/radial-bar-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; legendItem?: Record&lt;string, any&gt;; legendItemColor?: Record&lt;...&gt;; legendItemName?: Record&lt;...&gt;; }</code> | — | — |\n| <code>barSize</code> | no | <code>number</code> | — | Size of bars in px, `20` by default |\n| <code>data</code> | yes | <code>Record&lt;string, any&gt;[]</code> | — | Chart data |\n| <code>dataKey</code> | yes | <code>string</code> | — | Key from data object to use as data key |\n| <code>emptyBackgroundColor</code> | no | <code>string</code> | — | Color of the empty background, by default depends on the color scheme |\n| <code>endAngle</code> | no | <code>number</code> | — | Angle at which chart ends |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to recharts Legend component |\n| <code>radialBarChartProps</code> | no | <code>(PolarChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts RadarChartChart component |\n| <code>radialBarProps</code> | no | <code>Omit&lt;RadialBarProps, \"ref\"&gt;</code> | — | Props passed down to recharts RadialBar component |\n| <code>startAngle</code> | no | <code>number</code> | — | Angle at which chart starts |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to `Tooltip` recharts component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withBackground</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether empty bars area should be visible |\n| <code>withLabels</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether labels should be displayed |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the legend should be displayed |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the tooltip should be displayed when one of the bars is hovered |\n\n<a id=\"component-sankeychart\"></a>\n### `SankeyChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/sankey-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; tooltipItem?: Record&lt;string, any&gt;; tooltipItemBody?: Record&lt;...&gt;; ... 4 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>colors</code> | no | <code>DefaultMantineColor[]</code> | — | An array of colors used for nodes when no `color` is set on individual nodes |\n| <code>data</code> | yes | <code>SankeyChartData</code> | — | Data used to render chart, must include `nodes` and `links` arrays |\n| <code>iterations</code> | no | <code>number</code> | — | The number of relaxation iterations |\n| <code>linkColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Default color for links, by default depends on color scheme |\n| <code>linkCurvature</code> | no | <code>number</code> | — | The curvature of links between nodes |\n| <code>linkOpacity</code> | no | <code>number</code> | — | Opacity of the link fill |\n| <code>nodeColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Default color for nodes, by default depends on color scheme |\n| <code>nodePadding</code> | no | <code>number</code> | — | The padding between nodes |\n| <code>nodeWidth</code> | no | <code>number</code> | — | The width of each node |\n| <code>sankeyProps</code> | no | <code>Partial&lt;Omit&lt;RechartsSankeyProps, \"data\" &#124; \"ref\"&gt;&gt;</code> | — | Props passed down to recharts `Sankey` component |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls text color of labels |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip animation duration in ms |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to `Tooltip` recharts component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the tooltip should be displayed when hovered |\n\n<a id=\"component-scatterchart\"></a>\n### `ScatterChart`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/scatter-chart/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>attributes</code> | no | <code>{ legend?: Record&lt;string, any&gt;; grid?: Record&lt;string, any&gt;; root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; ... 14 more ...; scatter?: Record&lt;...&gt;; }</code> | — | — |\n| <code>data</code> | yes | <code>ScatterChartSeries[]</code> | — | Data that is used to build the chart |\n| <code>dataKey</code> | yes | <code>{ x: string; y: string; }</code> | — | Keys that should be used to retrieve data from the data array on x and y axis |\n| <code>gridAxis</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which lines should be displayed in the grid, `'x'` by default |\n| <code>gridColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the grid and cursor lines, by default depends on color scheme |\n| <code>gridProps</code> | no | <code>Omit&lt;CartesianGridProps, \"ref\"&gt;</code> | — | Props passed down to the `CartesianGrid` component |\n| <code>labels</code> | no | <code>{ x?: string; y?: string; }</code> | — | Labels that should be used instead of keys names in the tooltip |\n| <code>legendProps</code> | no | <code>Omit&lt;LegendProps, \"ref\"&gt;</code> | — | Props passed down to the `Legend` component |\n| <code>pointLabels</code> | no | <code>\"x\" &#124; \"y\"</code> | <code>\"x\"</code>, <code>\"y\"</code> | If set, displays labels next to points for the given axis |\n| <code>referenceLines</code> | no | <code>ChartReferenceLineProps[]</code> | — | Reference lines that should be displayed on the chart |\n| <code>rightYAxisLabel</code> | no | <code>string</code> | — | A label to display next to the right y-axis |\n| <code>rightYAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component rendered on the right side |\n| <code>scatterChartProps</code> | no | <code>(CartesianChartProps&lt;unknown&gt; &amp; { ref?: React.Ref&lt;SVGSVGElement&gt;; })</code> | — | Props passed down to recharts `ScatterChart` component |\n| <code>scatterProps</code> | no | <code>Partial&lt;Omit&lt;ScatterProps, \"ref\"&gt;&gt;</code> | — | Props passed down to recharts `Scatter` component |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Color of the text displayed inside the chart, `'dimmed'` by default |\n| <code>tickLine</code> | no | <code>\"none\" &#124; \"x\" &#124; \"y\" &#124; \"xy\"</code> | <code>\"none\"</code>, <code>\"x\"</code>, <code>\"xy\"</code>, <code>\"y\"</code> | Specifies which axis should have tick line, `'y'` by default |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip position animation duration in ms, `0` by default |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to the `Tooltip` component |\n| <code>unit</code> | no | <code>{ x?: string; y?: string; }</code> | — | Units displayed after value on axis and inside the tooltip |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withLegend</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart legend should be displayed, `false` by default |\n| <code>withRightYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether additional y-axis should be displayed on the right side of the chart, `false` by default |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether chart tooltip should be displayed, `true` by default |\n| <code>withXAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether x-axis should be displayed, `true` by default |\n| <code>withYAxis</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether y-axis should be displayed, `true` by default |\n| <code>xAxisLabel</code> | no | <code>string</code> | — | A label to display below the x-axis |\n| <code>xAxisProps</code> | no | <code>Omit&lt;XAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `XAxis` recharts component |\n| <code>yAxisLabel</code> | no | <code>string</code> | — | A label to display next to the y-axis |\n| <code>yAxisProps</code> | no | <code>Omit&lt;YAxisProps, \"ref\"&gt;</code> | — | Props passed down to the `YAxis` recharts component |\n\n<a id=\"component-sparkline\"></a>\n### `Sparkline`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/sparkline/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>areaProps</code> | no | <code>Omit&lt;AreaProps&lt;any, any&gt;, \"data\" &#124; \"ref\" &#124; \"dataKey\"&gt;</code> | — | Props passed down to the underlying recharts `Area` component |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; }</code> | — | — |\n| <code>connectNulls</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether null values should be connected with other values |\n| <code>curveType</code> | no | <code>\"step\" &#124; \"bump\" &#124; \"linear\" &#124; \"natural\" &#124; \"monotone\" &#124; \"stepBefore\" &#124; \"stepAfter\"</code> | <code>\"bump\"</code>, <code>\"linear\"</code>, <code>\"monotone\"</code>, <code>\"natural\"</code>, <code>\"step\"</code>, <code>\"stepAfter\"</code>, <code>\"stepBefore\"</code> | Type of the curve |\n| <code>data</code> | yes | <code>(number &#124; null)[]</code> | — | Data used to render the chart |\n| <code>trendColors</code> | no | <code>SparklineTrendColors</code> | — | If set, `color` prop is ignored and chart color is determined by the difference between first and last value. |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withGradient</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the chart fill should be a gradient |\n\n<a id=\"component-treemap\"></a>\n### `Treemap`\n\n- Safety: `wrapped`\n- Category: `charts`\n- Documentation: [upstream component API](https://mantine.dev/charts/treemap/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Include a nearby text summary of the chart data.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>aspectRatio</code> | no | <code>number</code> | — | The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given |\n| <code>attributes</code> | no | <code>{ root?: Record&lt;string, any&gt;; tooltip?: Record&lt;string, any&gt;; tooltipItem?: Record&lt;string, any&gt;; tooltipItemBody?: Record&lt;...&gt;; ... 4 more ...; tooltipBody?: Record&lt;...&gt;; }</code> | — | — |\n| <code>autoContrast</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether text color should be adjusted based on background color to improve contrast |\n| <code>data</code> | yes | <code>TreemapData[]</code> | — | Data used to render chart |\n| <code>dataKey</code> | no | <code>string</code> | — | Key in data object for the value |\n| <code>strokeColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls color of the node stroke, by default depends on color scheme |\n| <code>textColor</code> | no | <code>DefaultMantineColor</code> | <code>\"blue\"</code>, <code>\"cyan\"</code>, <code>\"dark\"</code>, <code>\"grape\"</code>, <code>\"gray\"</code>, <code>\"green\"</code>, <code>\"indigo\"</code>, <code>\"lime\"</code>, <code>\"orange\"</code>, <code>\"pink\"</code>, <code>\"red\"</code>, <code>\"teal\"</code>, <code>\"violet\"</code>, <code>\"yellow\"</code> | Controls text color of labels |\n| <code>tooltipAnimationDuration</code> | no | <code>number</code> | — | Tooltip animation duration in ms |\n| <code>tooltipProps</code> | no | <code>Omit&lt;TooltipProps&lt;any, any&gt;, \"ref\"&gt;</code> | — | Props passed down to `Tooltip` recharts component |\n| <code>treemapProps</code> | no | <code>Partial&lt;Omit&lt;RechartsTreemapProps&lt;TreemapDataType, any&gt;, \"data\" &#124; \"ref\" &#124; \"dataKey\"&gt;&gt;</code> | — | Props passed down to recharts `Treemap` component |\n| <code>unstyled</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | — |\n| <code>withTooltip</code> | no | <code>false &#124; true</code> | <code>false</code>, <code>true</code> | Determines whether the tooltip should be displayed when a node is hovered |\n"
    },
    {
      "path": "references/homarr-components.md",
      "content": "# Homarr components\n\n> Generated from `component-catalog-v1.json`. Catalog schema v1 · Custom Widget 2.0.0 · Mantine 9.4.1. Do not edit this file by hand.\n\nPackage: `@homarr/widgets`. Effective props combine the [shared prop API](components.md#shared-prop-api) with each component's specific props below. Component-specific records override shared records with the same name.\n\n## Package guidance\n\nHomarr components own controlled request, action, pagination, disclosure, icon, and recursive traversal behavior. Manual request parameters come from the invoking component's `params` prop. `RecursiveList` is the only supported arbitrary-depth authored renderer and its child template may use the restricted safe-block grammar.\n\n## Enabled inventory\n\n<code>ActionButton</code>, <code>Collapsible</code>, <code>PaginatedList</code>, <code>RecursiveList</code>, <code>RefreshButton</code>, <code>StatBar</code>, <code>SubData</code>, <code>SubFetch</code>, <code>TabPanel</code>, <code>TablerIcon</code>, <code>TabsContainer</code>, <code>ToggleSwitch</code>, <code>TypeBadge</code>\n\n## Denied inventory\n\n_None._\n\n## Component records\n\n<a id=\"component-actionbutton\"></a>\n### `ActionButton`\n\n- Safety: `wrapped`\n- Category: `network`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Action labels must describe their effect; destructive actions require confirmation.\n\nRuns a named user-triggered action.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>confirmMessage</code> | no | <code>string</code> | — | — |\n| <code>disabled</code> | no | <code>boolean &#124; string</code> | — | — |\n| <code>errorMessage</code> | no | <code>string</code> | — | — |\n| <code>fullWidth</code> | no | <code>boolean &#124; string</code> | — | — |\n| <code>icon</code> | no | <code>string</code> | — | — |\n| <code>label</code> | no | <code>string</code> | — | — |\n| <code>params</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |\n| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget action. |\n| <code>size</code> | no | <code>string</code> | — | — |\n| <code>successMessage</code> | no | <code>string</code> | — | — |\n\n<a id=\"component-collapsible\"></a>\n### `Collapsible`\n\n- Safety: `allowed`\n- Category: `interaction`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\nShows and hides a bounded content section.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>defaultOpen</code> | no | <code>boolean</code> | — | — |\n| <code>title</code> | yes | <code>string</code> | — | — |\n\n<a id=\"component-paginatedlist\"></a>\n### `PaginatedList`\n\n- Safety: `allowed`\n- Category: `interaction`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\nRenders a bounded page of collection items.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>pageSize</code> | no | <code>number</code> | — | — |\n\n<a id=\"component-recursivelist\"></a>\n### `RecursiveList`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\nRenders an arbitrary-depth tree through a bounded, Homarr-owned traversal.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>childrenPath</code> | yes | <code>string</code> | — | — |\n| <code>data</code> | yes | <code>unknown</code> | — | — |\n| <code>defaultExpandedDepth</code> | no | <code>number</code> | — | — |\n| <code>gap</code> | no | <code>MantineSpacing</code> | — | — |\n| <code>indent</code> | no | <code>MantineSpacing</code> | — | — |\n| <code>keyPath</code> | yes | <code>string</code> | — | — |\n| <code>maxDepth</code> | no | <code>number</code> | — | — |\n| <code>maxNodes</code> | no | <code>number</code> | — | — |\n| <code>showLines</code> | no | <code>boolean</code> | — | — |\n\n<a id=\"component-refreshbutton\"></a>\n### `RefreshButton`\n\n- Safety: `wrapped`\n- Category: `network`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Action labels must describe their effect; destructive actions require confirmation.\n\nRefreshes load-triggered widget queries.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>label</code> | no | <code>string</code> | — | — |\n| <code>size</code> | no | <code>string</code> | — | — |\n\n<a id=\"component-statbar\"></a>\n### `StatBar`\n\n- Safety: `allowed`\n- Category: `interaction`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\nDisplays a compact labeled statistic and progress value.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>label</code> | no | <code>string</code> | — | — |\n| <code>max</code> | no | <code>number</code> | — | — |\n| <code>value</code> | yes | <code>number</code> | — | — |\n\n<a id=\"component-subdata\"></a>\n### `SubData`\n\n- Safety: `wrapped`\n- Category: `network`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Action labels must describe their effect; destructive actions require confirmation.\n\nReads a nested value from a named manual-query result.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>as</code> | no | <code>'Text' &#124; 'Title' &#124; 'Badge' &#124; 'Code' &#124; 'Image'</code> | <code>\"Text\"</code>, <code>\"Title\"</code>, <code>\"Badge\"</code>, <code>\"Code\"</code>, <code>\"Image\"</code> | — |\n| <code>c</code> | no | <code>string</code> | — | — |\n| <code>fit</code> | no | <code>string</code> | — | — |\n| <code>fw</code> | no | <code>number</code> | — | — |\n| <code>h</code> | no | <code>string &#124; number</code> | — | — |\n| <code>order</code> | no | <code>1 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6</code> | <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | — |\n| <code>radius</code> | no | <code>string &#124; number</code> | — | — |\n| <code>size</code> | no | <code>string</code> | — | — |\n| <code>w</code> | no | <code>string &#124; number</code> | — | — |\n\n<a id=\"component-subfetch\"></a>\n### `SubFetch`\n\n- Safety: `wrapped`\n- Category: `network`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Action labels must describe their effect; destructive actions require confirmation.\n\nRuns a named manual query with invocation-time parameters.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>as</code> | no | <code>'json' &#124; 'text'</code> | <code>\"json\"</code>, <code>\"text\"</code> | — |\n| <code>errorMessage</code> | no | <code>string</code> | — | — |\n| <code>fallback</code> | no | <code>ReactNode</code> | — | — |\n| <code>loadingLabel</code> | no | <code>string</code> | — | — |\n| <code>params</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |\n| <code>refreshInterval</code> | no | <code>number</code> | — | — |\n| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget query. |\n| <code>trigger</code> | no | <code>'auto' &#124; 'manual'</code> | <code>\"auto\"</code>, <code>\"manual\"</code> | — |\n\n<a id=\"component-tabpanel\"></a>\n### `TabPanel`\n\n- Safety: `allowed`\n- Category: `interaction`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\nRenders content for one declarative tab.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>label</code> | no | <code>string</code> | — | — |\n| <code>value</code> | yes | <code>string</code> | — | — |\n\n<a id=\"component-tablericon\"></a>\n### `TablerIcon`\n\n- Safety: `wrapped`\n- Category: `content`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide meaningful text alternatives for non-text content.\n\nResolves an installed Tabler icon by its safe name.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>name</code> | yes | <code>string</code> | — | — |\n| <code>size</code> | no | <code>string &#124; number</code> | — | — |\n| <code>stroke</code> | no | <code>string &#124; number</code> | — | — |\n\n<a id=\"component-tabscontainer\"></a>\n### `TabsContainer`\n\n- Safety: `allowed`\n- Category: `interaction`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\nRenders a declarative tab container.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>defaultTab</code> | no | <code>string</code> | — | — |\n\n<a id=\"component-toggleswitch\"></a>\n### `ToggleSwitch`\n\n- Safety: `wrapped`\n- Category: `network`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Action labels must describe their effect; destructive actions require confirmation.\n\nRuns named actions for the enabled and disabled states.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>disabled</code> | no | <code>boolean &#124; string</code> | — | — |\n| <code>errorMessage</code> | no | <code>string</code> | — | — |\n| <code>initialValue</code> | no | <code>boolean &#124; string</code> | — | — |\n| <code>label</code> | no | <code>string</code> | — | — |\n| <code>offParams</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |\n| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget action. |\n| <code>size</code> | no | <code>string</code> | — | — |\n\n<a id=\"component-typebadge\"></a>\n### `TypeBadge`\n\n- Safety: `allowed`\n- Category: `interaction`\n- Documentation: [upstream component API](https://homarr.dev/docs/management/custom-widgets/)\n- Temporary bind: not available\n- Subcomponents: none\n- Component-specific blocked props: none\n- Accessibility:\n  - Provide a visible label or aria-label.\n\nDisplays a compact semantic type badge.\n\n#### Component-specific props\n\n| Prop | Required | Type | Literal values | Description |\n| --- | --- | --- | --- | --- |\n| <code>size</code> | no | <code>'xs' &#124; 'sm' &#124; 'md' &#124; 'lg' &#124; 'xl'</code> | <code>\"xs\"</code>, <code>\"sm\"</code>, <code>\"md\"</code>, <code>\"lg\"</code>, <code>\"xl\"</code> | — |\n| <code>type</code> | yes | <code>string</code> | — | — |\n"
    }
  ]
}