@carbon/react/es/components/Select/Select.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { type ChangeEventHandler, type ComponentPropsWithRef, type ReactNode } from 'react';
type ExcludedAttributes = 'size';
export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
    /**
     * Provide the contents of your Select
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be applied to the node containing the label and the select box
     */
    className?: string;
    /**
     * **Experimental**: Provide a `decorator` component to be rendered inside the `Select` component
     */
    decorator?: ReactNode;
    /**
     * Optionally provide the default value of the `<select>`
     */
    defaultValue?: any;
    /**
     * Specify whether the control is disabled
     */
    disabled?: boolean;
    /**
     * Provide text that is used alongside the control label for additional help
     */
    helperText?: ReactNode;
    /**
     * Specify whether the label should be hidden, or not
     */
    hideLabel?: boolean;
    /**
     * Specify a custom `id` for the `<select>`
     */
    id: string;
    /**
     * Specify whether you want the inline version of this control
     */
    inline?: boolean;
    /**
     * Specify if the currently value is invalid.
     */
    invalid?: boolean;
    /**
     * Message which is displayed if the value is invalid.
     */
    invalidText?: ReactNode;
    /**
     * Provide label text to be read by screen readers when interacting with the control.
     */
    labelText?: ReactNode;
    /**
     * `true` to use the light version. For use on $ui-01 backgrounds only.
     * Don't use this to make tile background color same as container background color.
     *
     * @deprecated The `light` prop for `Select` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component.
     * It will be moved in the next major release.
     */
    light?: boolean;
    /**
     * Reserved for use with Pagination component. Will not render a label for the
     * select since Pagination renders one for us.
     */
    noLabel?: boolean;
    /**
     * Provide an optional `onChange` hook that is called each time the value of the underlying `<input>` changes.
     */
    onChange?: ChangeEventHandler<HTMLSelectElement>;
    /**
     * Whether the select should be read-only
     */
    readOnly?: boolean;
    /**
     * Specify the size of the Select Input.
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * @deprecated please use decorator instead.
     * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
     */
    slug?: ReactNode;
    /**
     * Specify whether the control is currently in warning state
     */
    warn?: boolean;
    /**
     * Provide the text that is displayed when the control is in warning state
     */
    warnText?: ReactNode;
}
declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
export default Select;