@itwin/itwinui-react/cjs/core/InputGroup/InputGroup.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import { StatusMessage } from '../StatusMessage/StatusMessage.js';
type InputGroupProps = {
    /**
     * Label of the group.
     */
    label?: React.ReactNode;
    /**
     * Status of the group.
     */
    status?: 'positive' | 'warning' | 'negative';
    /**
     * Message below the group. Does not apply to 'inline' group.
     *
     * When `typeof message === "string"`, it is automatically wrapped with {@link StatusMessage}.
     * If you are passing a non-string message that is not `<StatusMessage>`, you may need to wrap it with
     * `<StatusMessage>` yourself for proper styling of `message`.
     */
    message?: React.ReactNode;
    /**
     * You can choose between default and inline.
     * @default 'default'
     */
    displayStyle?: 'default' | 'inline';
    /**
     * Disable whole group.
     * @default false
     */
    disabled?: boolean;
    /**
     * Whether the whole input group is required.
     * @default false
     */
    required?: boolean;
    /**
     * Custom icon. If group has status, default status icon is used instead.
     */
    svgIcon?: React.ComponentPropsWithoutRef<typeof StatusMessage>['startIcon'];
    /**
     * Child inputs inside group.
     */
    children: React.ReactNode;
    /**
     * Passes properties for label.
     */
    labelProps?: React.ComponentProps<'label'>;
    /**
     * Passes properties for message.
     */
    messageProps?: Pick<React.ComponentProps<typeof StatusMessage>, 'iconProps' | 'contentProps'>;
    /**
     * Passes properties for inner input group element.
     */
    innerProps?: React.ComponentProps<'div'>;
};
/**
 * Group Checkbox/Radio components together
 * @example
 * <caption>Group checkboxes</caption>
 * <InputGroup label='Checkbox group'>
 *  <Checkbox />
 *  <Checkbox />
 * </InputGroup>
 * @example
 * <caption>Group radios</caption>
 * <InputGroup label='Radio group'>
 *  <Radio />
 *  <Radio />
 * </InputGroup>
 */
export declare const InputGroup: PolymorphicForwardRefComponent<"div", InputGroupProps>;
export {};