# Select

This page contains all possible variations of the REACT select component.

Used to render a select input.

# Options

const options: IGocoSelectOption[] = [
  { label: 'option 1', value: '1' },
  { label: 'option 2', value: '2' },
  { label: 'option 3', value: '3' },
  { label: 'option 4', value: '4' },
];

# Select with Id, Placeholder, Options and onChange

<GocoSelect
  id="select-id"
  placeholder="Please select..."
  onChange={onChangeHandler}
  options={options}
/>

# Value

<GocoSelect
  id="select-id"
  placeholder="Please select..."
  onChange={onChangeHandler}
  options={options}
  value="3"
/>

# Label

<GocoSelect
  id="select-id"
  placeholder="Please select..."
  onChange={onChangeHandler}
  options={options}
  label="Select an option"
/>

# Dark

<GocoSelect
  id="select-id"
  placeholder="Please select..."
  onChange={onChangeHandler}
  options={options}
  dark
/>

# Size

<GocoSelect
  id="select-id"
  placeholder="Please select..."
  onChange={onChangeHandler}
  options={options}
  size="small"
/>

# Disabled

<GocoSelect
  id="select-id"
  placeholder="Please select..."
  onChange={onChangeHandler}
  options={options}
  disabled
/>

# Placeholder Disabled

<GocoSelect
  id="select-id"
  placeholder="Please select..."
  onChange={onChangeHandler}
  options={options}
  placeholderDisabled
/>

# ClassName

<GocoSelect
  id="select-id"
  placeholder="Please select..."
  onChange={onChangeHandler}
  options={options}
  className="test-class-1"
/>

# Component props

Prop	Type	Required	Description
id	String	true	Adds an id attribute to the select input. It must be unique with no spaces.
options	IGocoSelectOption[]	true	The options to be displayed in the select input.
value	String		Selects the option to be displayed.
onChange	(newValue?: string) => void	true	Handler to be called when change event is triggered.
placeholder	String	true	Text to be displayed as the label for the placeholder option.
label	String		Adds a label to the select input.
dark	Boolean		Will set the select style to dark mode.
size	IGocoSelectSize		Adjusts the height of the select input.
disabled	Boolean		Disables the entire select input.
disabledPlaceholder	Boolean		Disables placeholder option in the options list.
className	string		Allows the addition of extra classes. (Separated by a space)

← Input YesNo →