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

A react component library for iTwinUI

import * as React from 'react';
import type { SelectProps } from '../Select/Select.js';
import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
import { InputGrid } from '../InputGrid/InputGrid.js';
import { Icon } from '../Icon/Icon.js';
export type LabeledSelectProps<T> = {
    /**
     * Label of the select.
     */
    label?: React.ReactNode;
    /**
     * Message below the select. Does not apply to 'inline' select.
     *
     * @example
     * <caption>strings</caption>
     * <LabeledSelect message='Positive Message' … />
     *
     * @example
     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
     * <LabeledSelect
     *   status="positive"
     *   message={
     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
     *       Help message
     *     </StatusMessage>
     *   }
     *   …
     * />
     */
    message?: React.ReactNode;
    /**
     * Status of the select.
     * @default ''
     */
    status?: 'positive' | 'warning' | 'negative';
    /**
     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
     *
     * Custom svg icon. Will override status icon if specified.
     */
    svgIcon?: React.JSX.Element;
    /**
     * If true, shows a red asterisk.
     *
     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
     *
     * @default false
     */
    required?: boolean;
    /**
     * Pass props to wrapper element.
     */
    wrapperProps?: React.ComponentProps<typeof InputGrid>;
    /**
     * Passes properties for label.
     */
    labelProps?: React.ComponentProps<'div'>;
    /**
     * Passes properties for message content.
     */
    messageContentProps?: React.ComponentPropsWithRef<'div'>;
    /**
     * Passes properties for message icon.
     */
    messageIconProps?: React.ComponentProps<typeof Icon>;
} & Pick<LabeledInputProps, 'displayStyle'> & SelectProps<T> & {
    /**
     * LabeledSelect does not support `styleType`.
     */
    styleType?: never;
};
/**
 * Labeled select component to select value from options.
 * @example
 * <LabeledSelect
 *   label='Select Label'
 *   options={[
 *     { value: 1, label: 'Item #1' },
 *     { value: 2, label: 'Item #2' },
 *     { value: 3, label: 'Item #3' },
 *   ]}
 *   message='Help Message'
 * />
 * <LabeledSelect
 *   label='Select Label'
 *   options={[
 *     { value: 1, label: 'Item #1' },
 *     { value: 2, label: 'Item #2' },
 *     { value: 3, label: 'Item #3' },
 *   ]}
 *   message='Positive Message'
 *   status='positive'
 * />
 * <LabeledSelect
 *   label='Select Label'
 *   options={[
 *     { value: 1, label: 'Item #1' },
 *     { value: 2, label: 'Item #2' },
 *     { value: 3, label: 'Item #3' },
 *   ]}
 *   message='Custom Message'
 *   svgIcon={<SvgCamera />}
 * />
 */
export declare const LabeledSelect: <T>(props: LabeledSelectProps<T> & {
    ref?: React.ForwardedRef<HTMLElement>;
}) => React.JSX.Element;