Select

This is React implementation of the Select component.

Basic example usage:

                                                
                                                <Select id="select-default" label="Label" name="selectDefault">
                                                  <option value="" selected>
                                                    Placeholder
                                                  </option>
                                                  <option value="1">Option 1</option>
                                                  <option value="2">Option 2</option>
                                                </Select>

Advanced example usage:

                                                
                                                <Select
                                                  id="select-advanced"
                                                  name="selectAdvanced"
                                                  validationState="danger"
                                                  validationText="validation failed"
                                                  isRequired
                                                >
                                                  <option value="" selected disabled>
                                                    Placeholder
                                                  </option>
                                                  <option value="1">Option 1</option>
                                                  <option value="2">Option 2</option>
                                                </Select>

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Icons Provider

To display the icons correctly, the component needs to be wrapped with IconsProvider.

                                                
                                                import { IconsProvider } from 'packages/web-react/src/context';
                                                
                                                <IconsProvider>
                                                  <Select />
                                                </IconsProvider>;

Custom component

Select classes are fabricated using useSelectStyleProps hook. You can use it to create your own custom Select component.

                                                
                                                const CustomSelect = (props: SpiritSelectProps): JSX.Element => {
                                                  const { classProps, props: modifiedProps } = useSelectStyleProps(props);
                                                  const { styleProps, props: transferProps } = useStyleProps(restProps);
                                                
                                                  const renderValidationText = useValidationText({
                                                    validationTextClassName: classProps.validationText,
                                                    validationState,
                                                    validationText,
                                                    requireValidationState: false,
                                                  });
                                                
                                                  return (
                                                    <div {...styleProps} className={classNames(classProps.root, styleProps.className)}>
                                                      <label htmlFor={id} className={classProps.label}>
                                                        {label}
                                                      </label>
                                                      <div className={classProps.container}>
                                                        <select {...transferProps} id={id} className={classProps.input} ref={ref}>
                                                          {children}
                                                        </select>
                                                        <div className={classProps.icon}>
                                                          <Icon name={iconName} />
                                                        </div>
                                                      </div>
                                                      {helperText && <div className={classProps.helperText}>{helperText}</div>}
                                                      {renderValidationText}
                                                    </div>
                                                  );
                                                };

For detailed information see Select component or Select element.