Select

    Customize the native <select>s with custom CSS that changes the element’s initial appearance.

    Default

    Sizing

    You may also choose from small and large custom selects to match our similarly sized text inputs.

    API

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    disabled
    boolean

    Make the control disabled

    htmlSize
    number

    The size attribute of the underlying HTML element. Specifies the number of visible options.

    isInvalid
    boolean
    false

    Add "invalid" validation styles to the control and accompanying label

    isValid
    boolean
    false

    Add "valid" validation styles to the control

    onChange
    function

    A callback fired when the value prop changes

    size
    'sm' | 'lg'

    Size variants

    value
    string | arrayOf | number
    controlled by: onChange, initial prop: defaultValue

    The value attribute of underlying input

    bsPrefix
    string
    {'form-select'}

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.