@capgeminiuk/dcx-react-library/dist/formSelect/FormSelect.d.ts

[](https://circleci.com/gh/Capgemini/dcx-react-library)

import React, { ChangeEvent } from 'react';
import { ErrorMessageProps, HintProps, VisuallyHidden } from '../common/components/commonTypes';
import { OptionProps } from '../common/components/Option';
import { OptionGroupProps } from '../common/components/OptionGroup';
export type FormSelectProps = {
    /**
     * specify a custom class name to be applied to the form-select
     */
    selectClassName?: string;
    /**
     * specify a custom class name to be applied to the label
     */
    labelClassName?: string;
    /**
     * specify a custom class name to be applied to the full container
     */
    containerClassName?: string;
    /**
     * specify a custom class name to be applied to the full container when there's an error
     */
    containerErrorClassName?: string;
    /**
     * specify a custom class name to be applied to the full container when the select has a value selected
     */
    containerFilledClassName?: string;
    /**
     * select options. The options can be:
     * an array of strings,
     * an array of objects with: `label` (mandatory), `value` (mandatory), `ariaLabel`, `className`, `disabled`, `id`, `labelClassName`
     */
    options?: OptionProps[] | string[];
    /**
     * select groups
     */
    optionGroups?: OptionGroupProps[];
    /**
     * handle the change when the user select the option
     */
    onChange?: (evt: ChangeEvent<HTMLSelectElement>) => void;
    /**
     * select name
     */
    name?: string;
    /**
     * select id
     */
    id?: string;
    /**
     * define the aria-label
     */
    ariaLabel?: string;
    /**
     * select label
     */
    label?: string;
    /**
     * select label properties for optional label
     */
    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
    /**
     * select label hint
     */
    hint?: HintProps;
    /**
     * select error
     */
    error?: ErrorMessageProps;
    /**
     * display an error message
     */
    errorMessage?: string;
    /**
     * specify a custom class name to be applied to the error message
     */
    errorMessageClassName?: string;
    /**
     * for accessibility, specify the role of the select element.
     * it provide text (mandatory) and className (optional)
     */
    errorMessageVisuallyHidden?: VisuallyHidden;
    /**
     * provide an id to the error message
     */
    errorMessageId?: string;
    /**
     * select style
     */
    style?: any;
    /**
     * you can add an option that will have the specified label but an empty value
     * nullOption will be selected by default
     */
    nullOption?: string;
    /**
     * select value which is programatically added by user
     */
    value?: number | string;
    /**
     * if a variant floating is specified it will add a class 'dcx-floating-label' for supporting a floating label feature
     */
    variant?: 'floating' | 'normal';
    /**
     * will select the default value
     */
    defaultValue?: string;
    /**
     * provide an container props
     */
    containerProps?: any;
    /**
     * tab index value
     */
    tabIndex?: number;
    /**
     * will enable/disable the select
     */
    disabled?: boolean;
    /**
     * will allow to extend the select
     */
    selectProps?: React.SelectHTMLAttributes<HTMLSelectElement> & {
        ref?: React.RefObject<HTMLSelectElement>;
    };
};
export declare const FormSelect: ({ selectClassName, labelClassName, containerClassName, containerErrorClassName, containerFilledClassName, name, optionGroups, options, onChange, value, id, ariaLabel, label, labelProps, hint, error, errorMessage, errorMessageClassName, errorMessageVisuallyHidden, errorMessageId, style, nullOption, containerProps, defaultValue, tabIndex, variant, disabled, selectProps, }: FormSelectProps) => React.JSX.Element;