> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# SelectComponent

A React component that accepts `SelectComponentProps` as props.

```ts theme={null}
export type SelectComponent = React.ComponentType<SelectComponentProps>;
```

## `SelectComponentOption`

```ts theme={null}
export interface SelectComponentOption<Value = string> {
  label: string;
  value: Value;
  description?: string;
}
```

<ParamField path="label" type="string" required>
  The display text for the option.
</ParamField>

<ParamField path="value" type="Value" required>
  The value associated with the option. Defaults to `string` when no generic is provided.
</ParamField>

<ParamField path="description" type="string" optional>
  An optional description displayed alongside the option label.
</ParamField>

## `SelectComponentProps`

```ts theme={null}
export interface SelectComponentProps<Value = string> {
  id?: string;
  options: Array<SelectComponentOption<Value>>;
  value?: SelectComponentOption<Value>;
  onChange?: (option: SelectComponentOption<Value>) => void;
  onBlur?: () => void;
  placeholder?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  hasError?: boolean;
  isLoading?: boolean;
  width?: 'fill' | 'fit-content' | 'auto';
  placement?: AlignedPlacement | Side;
  isWithinPortal?: boolean;
  'aria-label'?: string;
  'aria-labelledby'?: string;
  renderOption?: (option: SelectComponentOption<Value>) => React.ReactNode;
  renderSelectedOption?: (option: SelectComponentOption<Value>) => React.ReactNode;
  ref?: React.Ref<any>;
}
```

<ParamField path="id" type="string" optional>
  An optional HTML `id` attribute for the select element.
</ParamField>

<ParamField path="options" type="Array<SelectComponentOption>" required>
  The list of options to display in the dropdown.
</ParamField>

<ParamField path="value" type="SelectComponentOption" optional>
  The currently selected option.
</ParamField>

<ParamField path="onChange" type="(option: SelectComponentOption) => void" optional>
  Callback invoked when the user selects an option.
</ParamField>

<ParamField path="onBlur" type="() => void" optional>
  Callback invoked when the select loses focus.
</ParamField>

<ParamField path="placeholder" type="string" optional>
  Placeholder text displayed when no option is selected.
</ParamField>

<ParamField path="isDisabled" type="boolean" optional>
  When `true`, the select is non-interactive and should be rendered in a visually disabled state.
</ParamField>

<ParamField path="isRequired" type="boolean" optional>
  When `true`, indicates the field is required.
</ParamField>

<ParamField path="hasError" type="boolean" optional>
  When `true`, the select is in an error state.
</ParamField>

<ParamField path="isLoading" type="boolean" optional>
  When `true`, indicates that options are being loaded.
</ParamField>

<ParamField path="width" type="'fill' | 'fit-content' | 'auto'" optional>
  Controls the width of the select trigger button.

  * `'fill'` — stretches to fill its container.
  * `'fit-content'` — shrinks to fit its content.
  * `'auto'` — intrinsic size with sensible min and max bounds.
</ParamField>

<ParamField path="placement" type="AlignedPlacement | Side" optional>
  The preferred placement of the dropdown menu relative to the trigger. `Side` is `'top' | 'bottom' | 'left' | 'right'` and `AlignedPlacement` is `` `${Side}-${'start' | 'end'}` `` (e.g. `'bottom-start'`).
</ParamField>

<ParamField path="isWithinPortal" type="boolean" optional>
  When `true`, the dropdown menu should be rendered inside a React portal.
</ParamField>

<ParamField path="aria-label" type="string" optional>
  An accessible label for the select. Use this when there is no visible label in the DOM.
</ParamField>

<ParamField path="aria-labelledby" type="string" optional>
  The `id` of an external element that labels this select. Pass this as the `aria-labelledby`
  attribute on your root element to satisfy accessibility requirements when a visible label exists in the DOM.
</ParamField>

<ParamField path="renderOption" type="(option: SelectComponentOption) => React.ReactNode" optional>
  Custom render function for each option in the dropdown list.
</ParamField>

<ParamField path="renderSelectedOption" type="(option: SelectComponentOption) => React.ReactNode" optional>
  Custom render function for the selected value displayed in the control.
</ParamField>

<ParamField path="ref" type="React.Ref<any>" optional>
  A React ref that should be forwarded to the underlying DOM element.
</ParamField>