The select component can have different shapes. Here is an example of a rounded select.
Show codeHide code
Selects can have a configurable icon on the left side using the icon prop. Make sure to pick meaningful icons for your use case.
Show codeHide code
Selects can have a material design style floating label using the labelFloat prop.
Show codeHide code
Selects can have different sizes like a smaller and a larger one using the size prop. accepted values are sm, md and lg.
Show codeHide code
Selects can have option groups using the optgroup element to wrap your options.
Show codeHide code
Selects can be shown in a loading state using the loading prop.
Show codeHide code
Selects can be shown in an error state using the error prop. Use the same prop to display an error message.
Please make a selection
Show codeHide code
Name
Type
Default
sizeThe size of the select input.
Show exampleHide example
iconAn icon to display in the select input.
Show exampleHide example
labelThe label text for the select input.
Show exampleHide example
idThe form input identifier.
Show exampleHide example
shapeThe shape of the select input.
Can be one of 'straight', 'rounded', 'curved', or 'full'.
Show exampleHide example
errorAn error message to display, or a boolean indicating whether there is an error.
Show exampleHide example
classesClasses to apply to the select input.
Show exampleHide example
contrastThe contrast of the select input.
Show exampleHide example
placeholderEmpty option text added to the beginning of the select input.
Show exampleHide example
disabledWhether the select input is disabled.
Show exampleHide example
loadingWhether the select input is in a loading state.
Show exampleHide example
label-floatIf the label should be floating.
Show exampleHide example
readonlyWhether the select input is read-only.
Show exampleHide example
Name
Slot Prop Type
#labelShow exampleHide example
#defaultShow exampleHide example
#icon