{ "version": 1.1, "tags": [ { "name": "r-accordion", "description": { "kind": "markdown", "value": "An accordion represents a list of expandable/collapsable content sections with corresponding headers.\n\nBy default, only one section can be expanded, which can be changed by setting the `multiple` attribute. Use accordions when a limited, additional amount of information needs to be shown within a page, or if there is a small space to show content.\n\nEach content section must be wrapped in a `` elements.\n\n\nExample:\n\n```\n\n \n Section title\n Section content goes here.\n \n\n```" }, "attributes": [ { "name": "multiple", "description": "Whether to allow multiple accordion items to be expanded at once" }, { "name": "size", "description": "Defines the size of an accordion UI.", "values": [ { "name": "l" }, { "name": "s" } ] } ] }, { "name": "r-accordion-panel", "description": { "kind": "markdown", "value": "Content panel that reveals or hides within an `r-accordion-section`. Must be placed in the `accordion-panel` slot of `r-accordion-section`.\n\nExample:\n```\n\n \n Section title\n Section content goes here.\n \n\n```" }, "attributes": [ { "name": "disabled", "description": "Indication of the panel disabled state." }, { "name": "expanded", "description": "Indication of the panel expanded state." }, { "name": "trigger", "description": "Id of the trigger that controls this panel." } ] }, { "name": "r-accordion-section", "description": { "kind": "markdown", "value": "A single expandable section within an `r-accordion`, wrapping `r-accordion-trigger` and `r-accordion-panel`. Controls expanded/collapsed state and communicates with the parent accordion.\n\nExample:\n```\n\n \n Section title\n Section content goes here.\n \n\n```" }, "attributes": [ { "name": "disabled", "description": "Indicates if `` is disabled" }, { "name": "expanded", "description": "Indicates if `` is expanded" }, { "name": "heading-aria-level", "description": "Defines heading level for accordion header" } ] }, { "name": "r-accordion-trigger", "description": { "kind": "markdown", "value": "The clickable header button that controls an accordion panel's expanded or collapsed state. Must be placed in the `accordion-trigger` slot of `r-accordion-section`.\nExample:\n```\n\n \n \n \n Section title\n \n Section content goes here.\n \n\n```" }, "attributes": [ { "name": "disabled", "description": "Controls disabled state" }, { "name": "expanded", "description": "Indication of the controlled panel revelation." }, { "name": "panel", "description": "Id of the panel this trigger controls." }, { "name": "splitted", "description": "Controls if expanded and collapsed icons are not the same" } ] }, { "name": "r-alert", "description": { "kind": "markdown", "value": "Displays an inline contextual message with a status icon, optional headline, body content, and dismiss action. Use to communicate feedback such as errors, warnings, success, or informational notices.\n\nExample\n```\n\n This is an informational alert.\n\n```" }, "attributes": [ { "name": "announced", "description": "Sets role=\"alert\" and will be announced to screen reader users" }, { "name": "content", "description": "Defines content text of the alert" }, { "name": "delay", "description": "" }, { "name": "delay-before-removal", "description": "" }, { "name": "delay-ms", "description": "" }, { "name": "dismiss-button-aria-label", "description": "Text content for an alert dismiss button" }, { "name": "dismiss-mode", "description": "Defines the behavior of the component's dismissing.\n- `auto`: The component will be dismissed automatically after the time specified by `delayMs` (or deprecated `delay` in seconds).\n- `manual`: The component requires explicit user action to close.", "values": [ { "name": "auto" }, { "name": "manual" } ] }, { "name": "headline", "description": "Defines headline text of the alert" }, { "name": "href", "description": "Defines href of the alert link" }, { "name": "leading-icon", "description": "Defines an icon to be presented in leading slot" }, { "name": "leading-icon-size", "description": "Defines an icon size to be presented in leading slot", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "leading-icon-src", "description": "Defines an icon source to be presented in leading slot" }, { "name": "leading-icon-visible", "description": "Defines whether the leading icon is visible." }, { "name": "link-text", "description": "Defines link label text of the alert" }, { "name": "open", "description": "Controls alert visibility" }, { "name": "status", "description": "Alert status controls apperance according to the status", "values": [ { "name": "error" }, { "name": "info" }, { "name": "warning" } ] }, { "name": "target", "description": "Defines the target for the linked URL when `href` is provided.\nOptions: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.", "values": [ { "name": "_blank" }, { "name": "_parent" }, { "name": "_self" }, { "name": "_top" } ] }, { "name": "trailing-icon", "description": "Defines an icon to be presented in trailing slot" }, { "name": "trailing-icon-size", "description": "Defines an icon size to be presented in trailing slot", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "trailing-icon-src", "description": "Defines an icon source to be presented in trailing slot" } ] }, { "name": "r-badge", "description": { "kind": "markdown", "value": "Informational element used to indicate the status of an object or action.\n\nExample\n```\nInfo\nCompleted\n```" }, "attributes": [ { "name": "icon-aria-label", "description": "Defines an accessible name for the icon" }, { "name": "icon-visible", "description": "Defines if badge icon should be visible" }, { "name": "variant", "description": "Variant defines how the component will be presented in UI,\noptional.", "values": [ { "name": "error" }, { "name": "information" }, { "name": "success" }, { "name": "warning" } ] } ] }, { "name": "r-button", "description": { "kind": "markdown", "value": "A button can be used by a user to trigger an action. Corresponds to, and is rendered as a,\n[native button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).\n\nExample:\n```\nSubmit\nCancel\nDisabled\nFull width\n```" }, "attributes": [ { "name": "disabled", "description": "Prevents user interaction and applies disabled style" }, { "name": "expanded", "description": "Whether to present as a full-width (100%) button.\n\nOnly primary and secondary buttons can be expanded." }, { "name": "form", "description": "Reference form element id with which the button is associated." }, { "name": "href", "description": "URL or a URL fragment that the hyperlink points to.\nIf the property is set, an anchor tag will be rendered." }, { "name": "icon", "description": "Name of an icon to display within button." }, { "name": "icon-position", "description": "Position of an icon within button.\nOnly use it when 'icon' is specified.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "r-aria-current", "description": "Indicates the current item within a set of related elements.\nCorresponds to\n[native `aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)", "values": [ { "name": "date" }, { "name": "false" }, { "name": "location" }, { "name": "page" }, { "name": "step" }, { "name": "time" }, { "name": "true" } ] }, { "name": "r-aria-description", "description": "Sets string value for `aria-description` attribute\n(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description)" }, { "name": "r-aria-label", "description": "Sets string value for `aria-label` attribute\n(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)" }, { "name": "size", "description": "Visual size", "values": [ { "name": "large" }, { "name": "small" } ] }, { "name": "target", "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.", "values": [ { "name": "_blank" }, { "name": "_parent" }, { "name": "_self" }, { "name": "_top" } ] }, { "name": "type", "description": "Button behavior, corresponding to\n[native `type` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] }, { "name": "variant", "description": "Presentational style", "values": [ { "name": "blank" }, { "name": "destructive" }, { "name": "primary" }, { "name": "secondary" }, { "name": "text" }, { "name": "text-inline" } ] } ] }, { "name": "r-card", "description": { "kind": "markdown", "value": "A flexible content container supporting portrait and landscape layouts with image, headline, description, badge, and optional button.\n\nExample:\n```\n\n\n \n Card title\n Supporting description text.\n Learn more\n\n\n\n\n \n Landscape card\n Description text.\n\n```" }, "attributes": [ { "name": "heading-aria-level", "description": "Defines the heading level for the headline." }, { "name": "href", "description": "Defines href for the interactive card" }, { "name": "leading-slot-alignment", "description": "Defines the vertical alignment of the leading slot content (e.g. image or icon).", "values": [ { "name": "bottom" }, { "name": "center" }, { "name": "top" } ] }, { "name": "size", "description": "Defines the size of the component. Only applies in portrait variant", "values": [ { "name": "medium" }, { "name": "small" } ] }, { "name": "target", "description": "Defines the target for the linked URL when `href` is provided.\nOptions: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.", "values": [ { "name": "_blank" }, { "name": "_parent" }, { "name": "_self" }, { "name": "_top" } ] }, { "name": "trailing-slot-alignment", "description": "Defines the vertical alignment of the trailing slot.", "values": [ { "name": "bottom" }, { "name": "center" }, { "name": "top" } ] }, { "name": "truncate-description", "description": "Truncates the description text with an ellipsis if it exceeds the available space." }, { "name": "truncate-headline", "description": "Truncates the headline text with an ellipsis if it exceeds the available space." }, { "name": "truncate-subtext", "description": "Truncates the subtext with an ellipsis if it exceeds the available space." }, { "name": "variant", "description": "Defines the layout of the component *", "values": [ { "name": "landscape" }, { "name": "portrait" } ] } ] }, { "name": "r-checkbox", "description": { "kind": "markdown", "value": "Checkboxes allow users to select none, one, or multiple items from a list.\n\nOverall behavior is based on native ``\n\nExample:\n```\nSubscribe to newsletter\nI accept the terms and conditions\nReceive promotional emails\nArchived (disabled)\n```" }, "attributes": [ { "name": "autofocus", "description": "Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior." }, { "name": "checked", "description": "Pass initial checked state" }, { "name": "custom-error-message", "description": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method." }, { "name": "disabled", "description": "Prevent user interaction and apply disabled style" }, { "name": "error", "description": "Custom validation error message" }, { "name": "form", "description": "Specifies the `id` of the `
` to which the element belongs" }, { "name": "indeterminate", "description": "Visually present checkbox in indeterminate state (neither checked nor unchecked)" }, { "name": "invalid", "description": "Indicate that validation has failed" }, { "name": "name", "description": "Name of element (data) within a form" }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements" }, { "name": "required", "description": "Specifies if checkbox must be checked" }, { "name": "valid", "description": "Indicate that validation is successful" }, { "name": "value", "description": "Value of element data within a form" }, { "name": "value-missing-message", "description": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API" } ] }, { "name": "r-checkbox-group", "description": { "kind": "markdown", "value": "Groups multiple `r-checkbox` elements under a shared label with optional select-all functionality, validation, and native form integration.\n\nExample:\n```\n\n News updates\n Special offers\n Events\n\n```" }, "attributes": [ { "name": "checked", "description": "Specifies if select-all checkbox is initially in checked state" }, { "name": "custom-error-message", "description": "Set custom message for `customError` property of a ValidityState object \nindicating whether the element's custom validity message has been set to a non-empty \nstring by calling the element's setCustomValidity() method." }, { "name": "error", "description": "Custom validation error message" }, { "name": "field-indicator", "description": "An optional field indicator for the label." }, { "name": "form", "description": "Specifies the `id` of the `` to which the element belongs." }, { "name": "help", "description": "Help text for the checkbox group." }, { "name": "help-icon", "description": "An optional icon to display in the help text." }, { "name": "help-icon-color", "description": "The color of the help icon." }, { "name": "hint", "description": "A hint providing additional information for the checkbox group." }, { "name": "indeterminate", "description": "Specifies if select-all checkbox is initially in indeterminate state" }, { "name": "indetermitate", "description": "" }, { "name": "invalid", "description": "Apply validation error visual style" }, { "name": "label", "description": "The label for the checkbox group." }, { "name": "name", "description": "Specifies `name` property of the 'select-all' checkbox, representing the group as a whole." }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements" }, { "name": "required", "description": "Specifies whether the `value` is required." }, { "name": "show-select-all", "description": "Whether to show a \"Select All\" checkbox." }, { "name": "valid", "description": "Apply validation success visual style" }, { "name": "value", "description": "Specifies `value` property of the 'select-all', representing the group as a whole." }, { "name": "value-missing-message", "description": "Set custom message for `valueMissing` property \nof a ValidityState object (set by `required`) \nwithin Constrain Validation API" } ] }, { "name": "r-design-system-devtools", "description": { "kind": "markdown", "value": "Can be used by developers to verify functionality of the design system.\n\nExample:\n```html\n\n```" }, "attributes": [ { "name": "design-tokens", "description": "Whether to display a preview of some key design tokens" } ] }, { "name": "r-dialog", "description": { "kind": "markdown", "value": "A modal dialog overlay for displaying content or collecting user input. Traps focus while open and supports customizable header, body, and footer slots.\n\nExample:\n```\n\n

Are you sure you want to proceed?

\n
\n Confirm\n Cancel\n
\n\n```" }, "attributes": [ { "name": "body-height", "description": "Allows to set height of the dialog body container \nwhile the value is smaller then `max-height` of the \ndialog body pre-set according to the `size` prop." }, { "name": "body-text", "description": "Allows plain text to be provided to the body of the dialog\nin cases where markup is not required. For more complex cases,\nincluding those requiring HTML markup, \nuse
...
." }, { "name": "close-aria-label", "description": "Allows plain text to be provided to the close button of the dialog." }, { "name": "headline", "description": "Allows to provide headline text to the dialog header section." }, { "name": "open", "description": "Define if dialog either shown or hidden." }, { "name": "return-value", "description": "A value indicating the result of a user’s \ninteraction with the dialog, used to determine what action \nthe user took before closing the dialog. \n\nFor example, it can differentiate between whether the user \nclicked a “Confirm” button or a “Cancel” button." }, { "name": "size", "description": "Defines one of pre-defined sizes of the dialog.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] } ] }, { "name": "r-float", "description": { "kind": "markdown", "value": "Floating positioning utility that anchors content relative to a trigger element. Used internally by `r-tooltip` to control placement and visibility of floating layer.\n\nExample\n```\n\n
Floating content
\n\n```" }, "attributes": [ { "name": "arrow", "description": "Defines if float has arrow pointing to trigger rendered" }, { "name": "offset", "description": "Gap in pixels between the trigger element and the float box." }, { "name": "open", "description": "Whether the float is currently visible." }, { "name": "placement-x", "description": "Preferred horizontal alignment of the float relative to the trigger.", "values": [ { "name": "center" }, { "name": "left" }, { "name": "right" } ] }, { "name": "placement-y", "description": "Preferred vertical side the float should appear on relative to the trigger.", "values": [ { "name": "bottom" }, { "name": "top" } ] }, { "name": "trigger", "description": "CSS selector (or bare `id`) of the trigger element the float should anchor to.\nSupports any valid `document.querySelector` string, e.g. `\"#my-btn\"` or `\"r-button\"`." } ] }, { "name": "r-hint", "description": { "kind": "markdown", "value": "A form hint is a small presentational components used next to some form elements.\n\nMainly used within design system components and not primarilly intended for end-users.\n\nExample:\n```\nThis field is required.\nEmail address is valid.\n```" }, "attributes": [ { "name": "icon", "description": "Allows to define custom icon to be shown next to hint text" }, { "name": "invalid", "description": "Apply validation error visual style" }, { "name": "variant", "description": "Variant defines the way hint will be visually presented", "values": [ { "name": "error" }, { "name": "information" }, { "name": "success" }, { "name": "warning" } ] } ] }, { "name": "r-icon", "description": { "kind": "markdown", "value": "Renders an SVG icon from the icon set (default Riverty) by name, or from a custom URL source.\n\nExample:\n```\n\n\n\n```" }, "attributes": [ { "name": "color", "description": "Quick way to set display color to one of the\nRiverty color tokens" }, { "name": "icon-aria-label", "description": "Defines an accessible name for the icon." }, { "name": "kit", "description": "Select kit", "values": [ { "name": "riverty" }, { "name": "test" } ] }, { "name": "name", "description": "Name of icon to select from the set" }, { "name": "size", "description": "Select one of pre-set sizes (width and height automatically selected)", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "src", "description": "Source of an icon to fetch from" }, { "name": "variant", "description": "Defines UI deviations for the icon.", "values": [ { "name": "button" } ] }, { "name": "view-box", "description": "Customize `viewBox` of rendered icon SVG element" } ] }, { "name": "r-icon-button", "description": { "kind": "markdown", "value": "An icon button is a button that contains only an icon and is used to trigger an action.\n\nExample\n```\n\n\n\n```" }, "attributes": [ { "name": "disabled", "description": "Prevents user interaction and applies disabled style." }, { "name": "label", "description": "The label for the button, used for accessibility.\nThis label is not visible on the button itself.\nIt is recommended to provide a label for screen readers.\nIf not provided, the button will be considered as having no label." }, { "name": "name", "description": "Name of the icon to display within the button." }, { "name": "r-aria-description", "description": "Sets string value for `aria-description` attribute" }, { "name": "r-tabindex", "description": "Defines the tabindex of the button for keyboard navigation." }, { "name": "size", "description": "Defines the size of the icon used within the button.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "tooltip-position", "description": "", "values": [ { "name": "bottom" }, { "name": "left" }, { "name": "right" }, { "name": "top" } ] }, { "name": "tooltip-text", "description": "" }, { "name": "variant", "description": "Defines the visual style of the button.\n- `standard`: Default button style.\n- `contained`: Button with a contained background.", "values": [ { "name": "contained" }, { "name": "standard" } ] } ] }, { "name": "r-illustration", "description": { "kind": "markdown", "value": "An illustration component that renders SVG illustrations based on a provided name or slotted content.\n\nExample:\n```\n\n\n```" }, "attributes": [ { "name": "empty-image-title", "description": "Accessibility: title for the image representing the \"failed-to-load\" state." }, { "name": "empty-marker-title", "description": "Accessibility: title for the marker representing the \"failed-to-load\" state." }, { "name": "error-alt", "description": "Accessible label (aria-label) for the error state. Pass an empty string to mark it decorative.\nWhen unset, the icon falls back to `emptyImageTitle`; without that it stays decorative while\n`errorMessage` is rendered, and uses `'Unable to load image'` when there is no visible message." }, { "name": "error-message", "description": "Error message text to display when illustration fails to load" }, { "name": "loading-alt", "description": "Accessible label (aria-label) for the loading state. Pass an empty string to mark it decorative." }, { "name": "max-width", "description": "Maximum width constraint for responsive behavior" }, { "name": "min-width", "description": "Minimum width constraint for responsive behavior" }, { "name": "name", "description": "Name of illustration to select from the set" }, { "name": "svg-description", "description": "Optional description element to be added inside the SVG for accessibility" }, { "name": "svg-title", "description": "Optional title element to be added inside the SVG for accessibility" }, { "name": "theme", "description": "Theme mode for illustration rendering", "values": [ { "name": "auto" }, { "name": "dark" }, { "name": "light" } ] }, { "name": "width", "description": "Defines initial width of an illustration. Defaults to 100% (fills the container); the illustration content itself stays a fixed 342x176 and is centered within this width." } ] }, { "name": "r-image", "description": { "kind": "markdown", "value": "Displays a responsive image with configurable size, object-fit, optional caption, and accessible alt text.\n\nExample\n```\n\n```" }, "attributes": [ { "name": "alt", "description": "Accessible description of the image" }, { "name": "caption", "description": "Text displayed as an image caption (if size of an image is not \"small\")." }, { "name": "error-alt", "description": "Accessible label for the error state" }, { "name": "height", "description": "Height of the image" }, { "name": "loading-alt", "description": "Accessible label for the loading state" }, { "name": "object-fit", "description": "Controls how the image is cropped/scaled within its box", "values": [ { "name": "contain" }, { "name": "cover" }, { "name": "fill" }, { "name": "none" }, { "name": "scale-down" } ] }, { "name": "object-position", "description": "Controls the anchor point of the image within its box. Accepts any CSS object-position value, e.g. 'top', 'center', '50% 20%'." }, { "name": "reload-text", "description": "Text to be shown in the error state for medium and large images" }, { "name": "size", "description": "Visual size", "values": [ { "name": "custom" }, { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "src", "description": "URL of the image to display" }, { "name": "width", "description": "Width of the image" } ] }, { "name": "r-input", "description": { "kind": "markdown", "value": "A text input form control supporting multiple input types, validation, leading/trailing slots, and native form integration.\n\nExample:\n```\n\n\n \n\n\n```" }, "attributes": [ { "name": "autocapitalize", "description": "Controls automatic capitalization of text input on mobile devices.\n- `off` or `none`: No automatic capitalization\n- `on` or `sentences`: Capitalize first letter of each sentence (default for most text inputs)\n- `words`: Capitalize first letter of each word\n- `characters`: Capitalize all characters", "values": [ { "name": "characters" }, { "name": "none" }, { "name": "off" }, { "name": "on" }, { "name": "sentences" }, { "name": "words" } ] }, { "name": "autocomplete", "description": "Native `autocomplete` hint for browsers / password managers.", "values": [ { "name": "address-level1" }, { "name": "address-level2" }, { "name": "address-line1" }, { "name": "address-line2" }, { "name": "bday" }, { "name": "bday-day" }, { "name": "bday-month" }, { "name": "bday-year" }, { "name": "cc-csc" }, { "name": "cc-exp" }, { "name": "cc-exp-month" }, { "name": "cc-exp-year" }, { "name": "cc-name" }, { "name": "cc-number" }, { "name": "country" }, { "name": "country-name" }, { "name": "current-password" }, { "name": "email" }, { "name": "family-name" }, { "name": "given-name" }, { "name": "language" }, { "name": "name" }, { "name": "new-password" }, { "name": "off" }, { "name": "on" }, { "name": "one-time-code" }, { "name": "organization" }, { "name": "photo" }, { "name": "postal-code" }, { "name": "sex" }, { "name": "street-address" }, { "name": "tel" }, { "name": "url" }, { "name": "username" } ] }, { "name": "autofocus", "description": "Automatically focus the input when it is first rendered.\nMirrors native `autofocus` attribute behavior. Avoid using multiple times per page." }, { "name": "bad-input-message", "description": "Custom message for `badInput` (conversion / parsing failure)." }, { "name": "custom-error-message", "description": "Custom message for `customError` (applies when set via `setCustomValidity()` logic internally)." }, { "name": "disabled", "description": "Disables the field (non-interactive, excluded from form submission)." }, { "name": "enterkeyhint", "description": "Hint for the action label/icon on the virtual keyboard's enter key.\nUse cases:\n- `enter`: Default, generic newline/submit action\n- `done`: Finishes current input session (e.g., last field in a form)\n- `go`: Navigates to URL input target (e.g., URL bar)\n- `next`: Advances to next input field in a sequence\n- `previous`: Goes back to previous input field\n- `search`: Submits a search query\n- `send`: Sends a message (e.g., chat, email)", "values": [ { "name": "done" }, { "name": "enter" }, { "name": "go" }, { "name": "next" }, { "name": "previous" }, { "name": "search" }, { "name": "send" } ] }, { "name": "error", "description": "Manual error message independent of native validation messages.\nWhen set, native validation messages are suppressed." }, { "name": "field-indicator", "description": "Small marker string appended to the label (e.g. “Optional”, localized markers, etc.)." }, { "name": "form", "description": "ID of the form this input is associated with (mirrors native `form` attribute).\nUse when the input is not a direct descendant of the target form element." }, { "name": "full-width", "description": "When true, stretches the component horizontally to fill its container." }, { "name": "hint", "description": "Optional contextual help text displayed beneath the field." }, { "name": "inputmode", "description": "Hint to the browser about which keyboard to display on mobile devices.", "values": [ { "name": "decimal" }, { "name": "email" }, { "name": "none" }, { "name": "numeric" }, { "name": "search" }, { "name": "tel" }, { "name": "text" }, { "name": "url" } ] }, { "name": "internal", "description": "When true, hides visual label & messages (for internal layout use; accessibility still preserved)." }, { "name": "invalid", "description": "Explicit invalid state override (when set manually)." }, { "name": "label", "description": "Label text describing the field. Provide for accessibility (or use the `label` slot)." }, { "name": "marker", "description": "Defines the validation marker strategy.\n`auto` (default) - Shows valid/invalid markers dynamically based on state and value.\n`valid` - Always shows the valid marker.\n`invalid` - Always shows the invalid marker.\n`none` - Hides the validation marker entirely.", "values": [ { "name": "auto" }, { "name": "invalid" }, { "name": "none" }, { "name": "valid" } ] }, { "name": "max", "description": "Maximum numeric/date value (for supported types)." }, { "name": "maxlength", "description": "Maximum character length (enforced by native input)." }, { "name": "min", "description": "Minimum numeric/date value (for supported types)." }, { "name": "minlength", "description": "Minimum character length (validation only)." }, { "name": "name", "description": "Name used when contributing the value to form submission (`FormData` / POST body)." }, { "name": "novalidate", "description": "If set, the field is skipped by built‑in (Constraint Validation API) validation logic.\nDoes not prevent custom validation you may trigger manually." }, { "name": "passwordrules", "description": "Safari-specific password rules for strong password generation (password inputs only).\nFormat: \"minlength: X; required: lower; required: upper; required: digit; required: special;\"\nThis attribute is Safari-specific and will be ignored by other browsers.\nSee: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules" }, { "name": "pattern", "description": "Regex pattern the value must match (string form)." }, { "name": "pattern-mismatch-message", "description": "Custom message for `patternMismatch`." }, { "name": "placeholder", "description": "Placeholder hint text shown when the field is empty and unfocused." }, { "name": "range-overflow-message", "description": "Custom message for `rangeOverflow`." }, { "name": "range-underflow-message", "description": "Custom message for `rangeUnderflow`." }, { "name": "readonly", "description": "Read-only mode (mirrors native `readonly`): value cannot be changed by the user,\nbut the field can still receive focus, be selected, and be submitted with a form." }, { "name": "required", "description": "Marks the field as required; failing to provide a value triggers `valueMissing`." }, { "name": "spellcheck", "description": "Controls browser spell-checking for text input.\nWhen true, enables spell-checking; when false, disables it.\nBrowser default behavior applies when not specified." }, { "name": "step", "description": "Step interval for numeric/date input types." }, { "name": "step-mismatch-message", "description": "Custom message for `stepMismatch`." }, { "name": "submit-on-enter", "description": "Controls whether pressing Enter triggers implicit form submission when this input is inside a form.\nSet to `false` for custom Enter behavior (for example, table filtering) without submitting the form." }, { "name": "too-long-message", "description": "Custom message for `tooLong`." }, { "name": "too-short-message", "description": "Custom message for `tooShort`." }, { "name": "type", "description": "Input type (e.g. `text`, `email`, `number`, `password`).\nSee HTMLInputElement `type` for supported values.", "values": [ { "name": "date" }, { "name": "email" }, { "name": "number" }, { "name": "password" }, { "name": "search" }, { "name": "tel" }, { "name": "text" }, { "name": "url" } ] }, { "name": "type-mismatch-message", "description": "Custom message for `typeMismatch`." }, { "name": "valid", "description": "Explicit valid state override (when set manually)." }, { "name": "validity-marker", "description": "When `true` field renders valid/invalid marker within." }, { "name": "value", "description": "Current value. Mutable: can be changed programmatically or through user input." }, { "name": "value-missing-message", "description": "Custom message for `valueMissing`." } ] }, { "name": "r-input-code", "description": { "kind": "markdown", "value": "A segmented digit input for entering short numeric or alphanumeric codes such as OTP or verification codes.\n\nExample:\n```\n\n```" }, "attributes": [ { "name": "aria-character-label", "description": "Defines label for each character's input.\nDefault \"Character: ${character number}\"" }, { "name": "autocomplete", "description": "Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill." }, { "name": "custom-error-message", "description": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method." }, { "name": "disabled", "description": "Whether the input is disabled" }, { "name": "enterkeyhint", "description": "Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion.", "values": [ { "name": "done" }, { "name": "enter" }, { "name": "go" }, { "name": "next" }, { "name": "previous" }, { "name": "search" }, { "name": "send" } ] }, { "name": "error", "description": "The way to provide error message separately from Constraint Validation API." }, { "name": "field-indicator", "description": "Text of an additional marker in the label" }, { "name": "form", "description": "Specifies the `id` of the `` to which the element belongs." }, { "name": "full-width", "description": "Defines if the component suppose to occupy 100% width" }, { "name": "hint", "description": "Description for accessibility" }, { "name": "inputmode", "description": "Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes.", "values": [ { "name": "decimal" }, { "name": "email" }, { "name": "none" }, { "name": "numeric" }, { "name": "search" }, { "name": "tel" }, { "name": "text" }, { "name": "url" } ] }, { "name": "invalid", "description": "Validity indicator, serving to change UI of the component" }, { "name": "label", "description": "Label for accessibility." }, { "name": "length", "description": "Number of digits (typically 4–6)." }, { "name": "marker", "description": "Controls the validation marker strategy.\n`auto` (default) shows the valid/invalid marker dynamically based on state and value.\n`valid` always shows the valid marker, `invalid` always shows the invalid marker,\n`none` hides the validation marker entirely.", "values": [ { "name": "auto" }, { "name": "invalid" }, { "name": "none" }, { "name": "valid" } ] }, { "name": "name", "description": "Specifies a name for an input for submission within formData object." }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements." }, { "name": "readonly", "description": "Read-only mode (mirrors native `readonly`): value cannot be changed by the user,\nbut the field can still receive focus, be selected, and be submitted with a form." }, { "name": "required", "description": "Whether the input is required" }, { "name": "submit-on-enter", "description": "Controls whether pressing Enter triggers implicit form submission when this input is inside a form.\nSet to `false` for custom Enter behavior without submitting the form." }, { "name": "too-short-message", "description": "Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API" }, { "name": "valid", "description": "Visual indication of valid state" }, { "name": "value", "description": "Defines initial value" }, { "name": "value-missing-message", "description": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API" } ] }, { "name": "r-input-date", "description": { "kind": "markdown", "value": "A date input form control with structured day, month, and year fields and built-in validation.\n\nExample\n```\n\n```" }, "attributes": [ { "name": "custom-error-message", "description": "Custom error message displayed for any validation failures in the input." }, { "name": "day-aria-label", "description": "Defines label for the input for the day" }, { "name": "disabled", "description": "Prevents user interaction and applies disabled style" }, { "name": "error", "description": "The way to provide error message separately from Constraint Validation API." }, { "name": "field-indicator", "description": "Text of an additional marker in the label" }, { "name": "form", "description": "Specifies the `id` of the `` to which the element belongs" }, { "name": "format", "description": "Specifies a date format" }, { "name": "full-width", "description": "Defines if the component suppose to occupy 100% width" }, { "name": "hint", "description": "Optional hint, visually presented under the input,\ngiving additional context to the user" }, { "name": "invalid", "description": "Validity indicator, serving to change UI of the component" }, { "name": "invalid-date-message", "description": "Custom error message displayed when date is not valid." }, { "name": "label", "description": "The text on the label" }, { "name": "max", "description": "Maximum date value (in the same format as the date input).\nNote: When changing the `format` prop, ensure `max` is also updated to match the new format." }, { "name": "min", "description": "Minimum date value (in the same format as the date input).\nNote: When changing the `format` prop, ensure `min` is also updated to match the new format." }, { "name": "month-aria-label", "description": "Defines label for the input for the month" }, { "name": "name", "description": "Specifies a name for a input" }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements" }, { "name": "range-overflow-message", "description": "Custom error message displayed when date is after the maximum date." }, { "name": "range-underflow-message", "description": "Custom error message displayed when date is before the minimum date." }, { "name": "readonly", "description": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)." }, { "name": "required", "description": "Specifies that an input is required/must be filled out" }, { "name": "submit-on-enter", "description": "Controls whether pressing Enter triggers implicit form submission when this input is inside a form.\nSet to `false` for custom Enter behavior without submitting the form." }, { "name": "valid", "description": "Visual indication of valid state" }, { "name": "value", "description": "The value of the date input" }, { "name": "value-missing-message", "description": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`)" }, { "name": "year-aria-label", "description": "Defines label for the input for the year" } ] }, { "name": "r-input-password", "description": { "kind": "markdown", "value": "A password input field with a built-in visibility toggle, validation.\n\nExample\n```\n\n```" }, "attributes": [ { "name": "autocomplete", "description": "Password-specific autocomplete behavior for browser password managers.", "values": [ { "name": "current-password" }, { "name": "new-password" }, { "name": "off" } ] }, { "name": "custom-error-message", "description": "Custom error message displayed for any validation failures in the input." }, { "name": "disabled", "description": "Prevents user interaction and applies disabled style" }, { "name": "error", "description": "The way to provide error message separately from Constraint Validation API." }, { "name": "field-indicator", "description": "Text of an additional marker in the label" }, { "name": "form", "description": "Specifies the `id` of the `` to which the element belongs" }, { "name": "full-width", "description": "Defines if the component suppose to occupy 100% width" }, { "name": "hidden-password-message", "description": "Custom message when the password is hidden to alert screen reader users." }, { "name": "hide-password-aria-label", "description": "Defines label for characters hide button." }, { "name": "hint", "description": "Optional hint, visually presented under the input,\ngiving additional context to the user" }, { "name": "invalid", "description": "Validity indicator, serving to change UI of the component" }, { "name": "label", "description": "The text on the label" }, { "name": "maxlength", "description": "Maximum character length (enforced by native input)." }, { "name": "minlength", "description": "Minimum character length (validation only)." }, { "name": "name", "description": "Specifies a name for a input" }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements" }, { "name": "passwordrules", "description": "Safari-specific password rules for strong password generation.\nFormat: \"minlength: X; required: lower; required: upper; required: digit; required: special;\"\nExample: \"minlength: 8; required: lower; required: upper; required: digit; required: special;\"\nNote: This attribute is Safari-specific and will be ignored by other browsers.\nSee: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules" }, { "name": "pattern", "description": "Regex pattern the value must match (string form)." }, { "name": "pattern-mismatch-message", "description": "Custom message for `patternMismatch`." }, { "name": "placeholder", "description": "Specifies a short hint that describes the expected value of a input" }, { "name": "readonly", "description": "Makes the input read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)." }, { "name": "required", "description": "Specifies that an input is required/must be filled out" }, { "name": "show-password-aria-label", "description": "Defines label for characters show button." }, { "name": "shown-password-message", "description": "Custom message when the password is shown to alert screen reader users." }, { "name": "submit-on-enter", "description": "Controls whether pressing Enter triggers implicit form submission when this input is inside a form.\nSet to `false` for custom Enter behavior without submitting the form." }, { "name": "too-long-message", "description": "Custom message for `tooLong`." }, { "name": "too-short-message", "description": "Custom message for `tooShort`." }, { "name": "valid", "description": "Visual indication of valid state" }, { "name": "value", "description": "The value of the password input" }, { "name": "value-missing-message", "description": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API" } ] }, { "name": "r-input-phone-number", "description": { "kind": "markdown", "value": "A phone number input with integrated country code prefix selection and built-in phone number validation.\n\nExample\n```\n\n```\n\nThis is a dedicated phone-number component, not a drop-in ``. It exposes its own named\nproperties and does **not** honour the native input constraint attributes `max`, `maxlength`,\n`min`, `minlength` or `step` — they have no effect. Phone-number length is a per-country\nvalidation outcome, not a character cap. To restrict input use `pattern` (allowed characters);\nto customise the invalid-number message use `invalidPhoneNumberMessage`." }, "attributes": [ { "name": "country-code-label", "description": "Label for countryCode code" }, { "name": "country-code-missing-message", "description": "Custom error message displayed when no country code is selected." }, { "name": "custom-error-message", "description": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method." }, { "name": "disabled", "description": "Prevents user interaction and applies disabled style." }, { "name": "error", "description": "Custom validation error message" }, { "name": "field-indicator", "description": "An optional field indicator for the label." }, { "name": "form", "description": "Specifies the `id` of the `` to which the element belongs" }, { "name": "full-width", "description": "Defines if the component suppose to occupy 100% width" }, { "name": "hint", "description": "Optional hint giving additional context to the user" }, { "name": "input-label", "description": "Label for phone input" }, { "name": "invalid", "description": "Validity indicator, serving to change UI of the component" }, { "name": "invalid-phone-number-message", "description": "Custom error message displayed when phone number is not valid." }, { "name": "label", "description": "The label for the phone number." }, { "name": "marker", "description": "Controls the validation marker strategy, forwarded to the inner input.\n`auto` (default) shows the valid/invalid marker dynamically based on state and value.\n`valid` always shows the valid marker, `invalid` always shows the invalid marker,\n`none` hides the validation marker entirely.", "values": [ { "name": "auto" }, { "name": "invalid" }, { "name": "none" }, { "name": "valid" } ] }, { "name": "name", "description": "Specifies a name for an input for submitting within formData object." }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements" }, { "name": "pattern", "description": "A regular expression pattern the local phone number part must match before\nthe phone library validation runs. Defaults to digits, spaces, parentheses,\nand hyphens: `^[\\d\\s()\\-]+$`." }, { "name": "readonly", "description": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)." }, { "name": "required", "description": "Specifies that phone number value is required" }, { "name": "submit-on-enter", "description": "Controls whether pressing Enter triggers implicit form submission when this input is inside a form.\nSet to `false` for custom Enter behavior without submitting the form." }, { "name": "valid", "description": "Visual indication of valid state" }, { "name": "value", "description": "Phone number value" }, { "name": "value-missing-message", "description": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API" } ] }, { "name": "r-label", "description": { "kind": "markdown", "value": "Utility component, mostly used internally in other design system components,\nfor consistent presentation of text with optional associated tooltip.\n\nExample\n```\nEmail address\nFull name\n```" }, "attributes": [ { "name": "field-indicator", "description": "Text of an additional marker" } ] }, { "name": "r-list-item", "description": { "kind": "markdown", "value": "A single interactive list item with configurable leading icon, headline, description, trailing area, and support for nested child items.\n\nExample\n```html\n\n \n \n\n\n\n\n \n \n\n```" }, "attributes": [ { "name": "active", "description": "Indicates whether the list item is currently active (e.g., represents the current page)." }, { "name": "alignment", "description": "Defines the alignment style for the trailing text.", "values": [ { "name": "bottom" }, { "name": "center" }, { "name": "top" } ] }, { "name": "checkbox", "description": "If true, renders a checkbox in the trailing slot (3rd slot)." }, { "name": "checked", "description": "Controls the checked state of the trailing checkbox." }, { "name": "description", "description": "Secondary text displayed below the headline (2nd slot), used for additional details or context." }, { "name": "disabled", "description": "If true, prevents user interaction with the list item and applies a disabled style." }, { "name": "divider", "description": "If true, adds a horizontal divider below the list item." }, { "name": "expanded", "description": "Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction." }, { "name": "form", "description": "Specifies the `id` of the `` to which the element belongs" }, { "name": "headline", "description": "The main text or headline displayed in the text slot (2nd slot) of the list item." }, { "name": "hide-leading-icon", "description": "Defines if the leading icon shall become hidden." }, { "name": "href", "description": "If provided, renders the list item as a link using the tag with the given href attribute." }, { "name": "indeterminate", "description": "Controls the indeterminate state of the trailing checkbox." }, { "name": "interactive", "description": "Indicates that element is supports accessible interactions, like hover, focus, click, etc." }, { "name": "invalid", "description": "Indicate that validation has failed" }, { "name": "leading-icon", "description": "Specifies the name of the icon to display in the leading slot (1st slot) of the list item." }, { "name": "leading-icon-src", "description": "Defines an icon source to be presented in leading slot" }, { "name": "name", "description": "Controls the name of the trailing checkbox, used for form submission." }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements" }, { "name": "position", "description": "Controls the position of the trailing checkbox.", "values": [ { "name": "center" }, { "name": "top" } ] }, { "name": "required", "description": "Specifies if checkbox must be checked" }, { "name": "trailing-badge", "description": "Badge text displayed in the trailing slot (3rd slot), as an alternative to an icon or text." }, { "name": "trailing-badge-variant", "description": "Badge variant displayed in the trailing slot (3rd slot), as an alternative to an icon or text.", "values": [ { "name": "error" }, { "name": "information" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "trailing-icon", "description": "Specifies the name of the icon to display in the trailing slot (3rd slot) of the list item." }, { "name": "trailing-icon-src", "description": "Defines an icon source to be presented in trailing slot" }, { "name": "trailing-text", "description": "Text displayed in the trailing slot (3rd slot), as an alternative to an icon." }, { "name": "truncate-description", "description": "When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows." }, { "name": "valid", "description": "Indicate that validation is successful" }, { "name": "value", "description": "Controls the value of the trailing checkbox, used for form submission." }, { "name": "variant", "description": "Controls the style variation of the list item, such as regular or subitem.", "values": [ { "name": "list-item" }, { "name": "navitem" }, { "name": "subitem" } ] } ] }, { "name": "r-pagination", "description": { "kind": "markdown", "value": "Navigation control for moving between pages of content, with page number buttons, prev/next arrows, and configurable items-per-page options.\n\nExample\n```\n\n```" }, "attributes": [ { "name": "arrows", "description": "UI: Arrows present/absent:" }, { "name": "ellipsis-label", "description": "Label for Ellipsis stepper. Important to ensure accessibility for screen reader users." }, { "name": "end-text", "description": "Text to display after total results" }, { "name": "first-page-button-label", "description": "Label for First Page button. Important to ensure accessibility for screen reader users." }, { "name": "items-per-page", "description": "Amount of items to show per page;" }, { "name": "items-per-page-label", "description": "Label for Items per page select." }, { "name": "last-page-button-label", "description": "Label for Last Page button. Important to ensure accessibility for screen reader users." }, { "name": "list-box-position", "description": "Position of the list box", "values": [ { "name": "bottom" }, { "name": "top" } ] }, { "name": "max-visible-pages", "description": "The maximum number of visible page buttons (excluding ellipsis steppers)." }, { "name": "middle-text", "description": "Text to display between currently shown results and total amount of results" }, { "name": "next-page-button-label", "description": "Label for Next Page button. Important to ensure accessibility for screen reader users." }, { "name": "page-active", "description": "Current page number;" }, { "name": "page-label", "description": "Label for Page number buttons. Important to ensure accessibility for screen reader users." }, { "name": "previous-page-button-label", "description": "Label for Previous Page button. Important to ensure accessibility for screen reader users." }, { "name": "results-line", "description": "UI: Result Line and select field present/absent;" }, { "name": "select-text", "description": "Text to show in select" }, { "name": "start-text", "description": "Text to show in beginning of resultLine;" }, { "name": "total-results", "description": "Total amount of pages to select from;" }, { "name": "variant", "description": "Allows selection between different pagination styles: minimized, standard, maximized;", "values": [ { "name": "maximized" }, { "name": "minimized" }, { "name": "standard" } ] } ] }, { "name": "r-panel", "description": { "kind": "markdown", "value": "A collapsible side navigation panel with expandable nav sections, can be collapsed and expanded.\n\nExample\n```\n\n \"Company\n \n \n \n
\n Logout\n
\n\n```" }, "attributes": [ { "name": "active", "description": "A boolean property that indicates whether the navitems are active of not" }, { "name": "collapsed", "description": "A boolean property that determines the collapsed state of the component. The default state is `false`." }, { "name": "has-footer", "description": "A boolean property that indicates whether the component includes a footer" }, { "name": "has-header", "description": "A boolean property that indicates whether the component includes a header" }, { "name": "header", "description": "The `header` property is a string that specifies the header text." }, { "name": "label-collapse", "description": "Aria-label text for collapse" }, { "name": "label-expand", "description": "Aria-label text for expand" }, { "name": "logo-link", "description": "Logo link" }, { "name": "variant", "description": "Presentational style", "values": [ { "name": "drawer" }, { "name": "modal" }, { "name": "visible" } ] } ] }, { "name": "r-popover", "description": { "kind": "markdown", "value": "A floating contextual overlay anchored to a trigger element, with headline, body content, and action slots. Supports auto or manual dismiss.\n\nExample\n```\n\n \n \n \n \n Here is some additional information about this topic.\n \n Got it\n \n\n```" }, "attributes": [ { "name": "dismiss-aria-label", "description": "Defines `aria-label` content for the dismiss button.\nUsed for accessibility when dismiss button is present." }, { "name": "dismiss-mode", "description": "Defines the behavior of the popover's dismissing.\n- `auto`: The popover can be dismissed by clicking outside or pressing Esc.\n- `manual`: The popover requires explicit user action to close.", "values": [ { "name": "auto" }, { "name": "manual" } ] }, { "name": "horizontal", "description": "Defines preferred placement horizontally relative to the trigger.\n- `left`: Align to the left of the trigger\n- `center`: Center align with the trigger\n- `right`: Align to the right of the trigger", "values": [ { "name": "center" }, { "name": "cover" }, { "name": "left" }, { "name": "right" } ] }, { "name": "open", "description": "Defines initial state of the popover visibility." }, { "name": "trigger-action", "description": "Defines the action that will be triggered when the trigger is clicked.\n- `toggle`: Toggle the popover open/closed state\n- `show`: Only show the popover\n- `hide`: Only hide the popover", "values": [ { "name": "hide" }, { "name": "show" }, { "name": "toggle" } ] }, { "name": "trigger-aria-label", "description": "Defines `aria-label` content for the popover trigger.\nUsed for accessibility to describe the trigger button." }, { "name": "vertical", "description": "Defines preferred placement vertically relative to the trigger.\n- `top`: Position above the trigger\n- `bottom`: Position below the trigger\n- `middle`: Position to the side of the trigger", "values": [ { "name": "bottom" }, { "name": "cover" }, { "name": "middle" }, { "name": "top" } ] } ] }, { "name": "r-popover-action", "description": { "kind": "markdown", "value": "Action button area rendered at the bottom of an `r-popover`. Place in the `action` slot of `r-popover`.\n\nExample\n```\n\n \n Confirm\n Cancel\n \n\n```" }, "attributes": [] }, { "name": "r-popover-content", "description": { "kind": "markdown", "value": "Body content area inside an `r-popover`. Place in the `content` slot of `r-popover`.\n\nExample\n```\n\n \n Here is some additional context or information.\n \n\n```" }, "attributes": [] }, { "name": "r-popover-headline", "description": { "kind": "markdown", "value": "Headline text displayed at the top of an `r-popover`. Place in the `headline` slot of `r-popover`.\n\nExample\n```\n\n Need help?\n\n```" }, "attributes": [] }, { "name": "r-popover-trigger", "description": { "kind": "markdown", "value": "The trigger element that opens a connected `r-popover` on click or hover. Place in the `trigger` slot of `r-popover`.\n\nExample\n```\n\n \n \n \n\n```" }, "attributes": [] }, { "name": "r-progress-bar", "description": { "kind": "markdown", "value": "Displays a horizontal progress indicator showing the completion percentage of a task or process.\n\nExample\n```\n\n```" }, "attributes": [ { "name": "progress", "description": "Progress bar value" }, { "name": "r-aria-label", "description": "Sets string value for `aria-label` attribute\n(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)" } ] }, { "name": "r-radio-button", "description": { "kind": "markdown", "value": "A radio button is used to select a single option in a list.\n\nExample\n```\n\nBasic plan\n\n\n\n Premium plan\n All features included\n\n```" }, "attributes": [ { "name": "autofocus", "description": "Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior." }, { "name": "checked", "description": "When true the radio is selected" }, { "name": "description", "description": "Additional directions for radio-button" }, { "name": "disabled", "description": "Prevents user interaction and applies disabled style" }, { "name": "error", "description": "Custom validation error message" }, { "name": "form", "description": "Specifies the `id` of the `` to which the element belongs" }, { "name": "hint", "description": "Optional hint, visually presented under the radio button,\ngiving additional context to the user" }, { "name": "icon", "description": "Icon name from the set" }, { "name": "invalid", "description": "Apply validation error visual style" }, { "name": "name", "description": "Name of element (data) within a form" }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements" }, { "name": "required", "description": "Defines if an element shall be validated" }, { "name": "value", "description": "Value of element data within a form" } ] }, { "name": "r-radio-button-description", "description": { "kind": "markdown", "value": "Supporting description slot for `r-radio-button`. Place inside the `description` slot of an `r-radio-button`.\n\nExample\n```\n\n Pro\n Advanced features for power users\n\n```" }, "attributes": [] }, { "name": "r-radio-button-leading", "description": { "kind": "markdown", "value": "Leading visual slot (e.g. icon) for `r-radio-button`. Place inside the `leading` slot of an `r-radio-button`.\n\nExample\n```\n\n \n \n \n Credit card\n\n```" }, "attributes": [] }, { "name": "r-radio-button-title", "description": { "kind": "markdown", "value": "Title text slot for `r-radio-button`. Place inside the `title` slot of an `r-radio-button`.\n\nExample\n```\n\n Standard plan\n\n```" }, "attributes": [] }, { "name": "r-radio-button-trailing", "description": { "kind": "markdown", "value": "Trailing visual slot (e.g. badge or icon) for `r-radio-button`. Place inside the `trailing` slot of an `r-radio-button`.\n\nExample\n```\n\n Popular\n \n \n \n\n```" }, "attributes": [] }, { "name": "r-radio-group", "description": { "kind": "markdown", "value": "Groups `r-radio-button` elements under a shared label with keyboard navigation, validation.\n\nExample\n```\n\n Basic\n Standard\n Premium\n\n```" }, "attributes": [ { "name": "autofocus", "description": "When set to `true`, automatically focuses the first enabled radio button in the group on mount.\nThis will focus the selected radio button if one exists, or the first enabled radio button otherwise." }, { "name": "custom-error-message", "description": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method." }, { "name": "disabled", "description": "Specifies if the entire radio group is disabled" }, { "name": "error", "description": "Custom validation error message" }, { "name": "field-indicator", "description": "Define the marker text if the field label is marked\nField indicator can be Required*, Optional or a translation of those two options." }, { "name": "form", "description": "Specifies the `id` of the `` to which the element belongs" }, { "name": "hint", "description": "Optional hint, visually presented under the group of radio-buttons\ngiving additional context to the user" }, { "name": "invalid", "description": "Apply validation error visual style" }, { "name": "label", "description": "The text of the label rendered before the set of radio-buttons" }, { "name": "name", "description": "Specifies common `name` property that is passed to each `r-radio-button`" }, { "name": "novalidate", "description": "Specifies if element must be ignored during validation of the form elements" }, { "name": "parent-value", "description": "For nested radio groups: specifies the parent radio button value that this nested group belongs to.\nWhen the parent group's value changes to a different value, this nested group will be automatically reset.\nThis ensures nested selections are only maintained when their parent context is active." }, { "name": "required", "description": "Specifies if radio-button within group must be checked" }, { "name": "valid", "description": "Apply validation success visual style" }, { "name": "value", "description": "Displays currently selected value" }, { "name": "value-missing-message", "description": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API" }, { "name": "variant", "description": "Controls the style variation of the radio buttons.", "values": [ { "name": "contained" }, { "name": "standard" } ] } ] }, { "name": "r-select", "description": { "kind": "markdown", "value": "A select allows the user to choose between a set of options.\nOverall behavior is based on native `