package.dist.RadioButton.d.ts Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of webcomponents Show documentation
UI5 Web Components: webcomponents.main
The newest version!
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
import type WrappingType from "./types/WrappingType.js";
/**
 * @class
 *
 * ### Overview
 *
 * The `ui5-radio-button` component enables users to select a single option from a set of options.
 * When a `ui5-radio-button` is selected by the user, the
 * `change` event is fired.
 * When a `ui5-radio-button` that is within a group is selected, the one
 * that was previously selected gets automatically deselected. You can group radio buttons by using the `name` property.
 *
 * **Note:** If `ui5-radio-button` is not part of a group, it can be selected once, but can not be deselected back.
 *
 * ### Keyboard Handling
 *
 * Once the `ui5-radio-button` is on focus, it might be selected by pressing the Space and Enter keys.
 *
 * The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,
 * while TAB and SHIFT + TAB can be used to enter or leave the radio button group.
 *
 * **Note:** On entering radio button group, the focus goes to the currently selected radio button.
 *
 * ### ES6 Module Import
 *
 * `import "@ui5/webcomponents/dist/RadioButton";`
 * @constructor
 * @extends UI5Element
 * @public
 * @csspart outer-ring - Used to style the outer ring of the `ui5-radio-button`.
 * @csspart inner-ring - Used to style the inner ring of the `ui5-radio-button`.
 */
declare class RadioButton extends UI5Element implements IFormInputElement {
    /**
     * Defines whether the component is disabled.
     *
     * **Note:** A disabled component is completely noninteractive.
     * @default false
     * @public
     */
    disabled: boolean;
    /**
     * Defines whether the component is read-only.
     *
     * **Note:** A read-only component is not editable,
     * but still provides visual feedback upon user interaction.
     * @default false
     * @public
     */
    readonly: boolean;
    /**
     * Defines whether the component is required.
     * @default false
     * @public
     * @since 1.9.0
     */
    required: boolean;
    /**
     * Defines whether the component is checked or not.
     *
     * **Note:** The property value can be changed with user interaction,
     * either by clicking/tapping on the component,
     * or by using the Space or Enter key.
     * @default false
     * @formEvents change
     * @formProperty
     * @public
     * @since 1.0.0-rc.15
     */
    checked: boolean;
    /**
     * Defines the text of the component.
     * @default undefined
     * @public
     */
    text?: string;
    /**
     * Defines the value state of the component.
     * @default "None"
     * @public
     */
    valueState: `${ValueState}`;
    /**
     * Determines the name by which the component will be identified upon submission in an HTML form.
     *
     * Radio buttons with the same `name` will form a radio button group.
     *
     * **Note:** By this name the component will be identified upon submission in an HTML form.
     *
     * **Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.
     *
     * **Note:** Only one radio button can be selected per group.
     * @default undefined
     * @public
     */
    name?: string;
    /**
     * Defines the form value of the component.
     * When a form with a radio button group is submitted, the group's value
     * will be the value of the currently selected radio button.
     * @default ""
     * @public
     */
    value: string;
    /**
     * Defines whether the component text wraps when there is not enough space.
     *
     * **Note:** for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
     * @default "Normal"
     * @public
     */
    wrappingType: `${WrappingType}`;
    /**
     * Defines the accessible ARIA name of the component.
     * @default undefined
     * @public
     * @since 1.6.0
     */
    accessibleName?: string;
    /**
     * Defines the IDs of the elements that label the component.
     * @default undefined
     * @public
     * @since 1.1.0
     */
    accessibleNameRef?: string;
    _tabIndex?: string;
    /**
     * Defines the active state (pressed or not) of the component.
     * @default false
     * @private
     */
    active: boolean;
    /**
     * Defines if the component is selected in specific group
     * @default false
     * @private
     */
    _groupChecked: boolean;
    _groupRequired: boolean;
    _deactivate: () => void;
    _name: string;
    _checked: boolean;
    get formValidityMessage(): string;
    get formValidity(): ValidityStateFlags;
    formElementAnchor(): Promise;
    get formFormattedValue(): string | null;
    static i18nBundle: I18nBundle;
    constructor();
    static onDefine(): Promise;
    onAfterRendering(): void;
    onEnterDOM(): void;
    onExitDOM(): void;
    syncGroup(forceRemove?: boolean): void;
    _onclick(): this;
    _handleDown(e: KeyboardEvent): void;
    _handleUp(e: KeyboardEvent): void;
    _onkeydown(e: KeyboardEvent): void | this;
    _onkeyup(e: KeyboardEvent): void;
    _onmousedown(): void;
    _onmouseup(): void;
    _onfocusout(): void;
    toggle(): this;
    canToggle(): boolean;
    get classes(): {
        inner: {
            "ui5-radio-inner--hoverable": boolean;
        };
    };
    get effectiveAriaDisabled(): "true" | null;
    get ariaLabelText(): string;
    get effectiveAriaDescribedBy(): string | undefined;
    get hasValueState(): boolean;
    get valueStateText(): string;
    get effectiveTabIndex(): string | undefined;
}
export default RadioButton;