Select

import { Select } from "@lualtek/react-components";
 
export default () => {
  return (
    <Select label="Selection" defaultValue="placeholder">
      <option value="placeholder" hidden disabled>
        Pick an option
      </option>
      <optgroup label="Option Group One">
        <option value="1">This is a very long option selected</option>
        <option value="2">Option 2</option>
      </optgroup>
      <optgroup label="Option Group Two">
        <option value="3">Option 1</option>
        <option value="4">Option 2</option>
        <option value="5">Option 3</option>
      </optgroup>
    </Select>
  );
};

export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
  /**
   * Change the default icon displayed on the side of the select.
   * @default "increase"
   */
  icon?: IconProps["source"];
 
  /**
   * Set the accessible label for the select.
   */
  label: ReactNode;
 
  /**
   * Set how many options can be selected at once.
   * @default "single"
   */
  kind?: "single" | "multiple";
 
  /**
   * Set disabled state. The select is not interactive and grayed out.
   * @default false
   */
  disabled?: boolean;
 
  /**
   * Callback function to be called when a new value is selected.
   */
  onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
 
  /**
   * Force the select to take the full width of its container.
   * @default false
   */
  fullWidth?: boolean;
};