Components
Select

Select

The Select component is used to create a dropdown select input. It provides a list of options that the user can choose from.

Props

The Select component accepts the following props:

NameTypeDefaultDescription
valueanyThe currently selected value.
type"default", "primary", "plain", "borderless", "text""default"The type of the select input.
childrenReact.ReactElement or React.ReactElement[]The list of SelectOption components that define the options for the select input.
placeholderstringThe placeholder text to display when no option is selected.
iconstring | JSX.Element | React.ReactNode | React.ReactElementThe icon to display
size"large" | "medium" | "default" | "small" | "mini""default"The size of the select.
disabledbooleanfalseIf true, the select input is disabled and cannot be interacted with.
onChange(value?: any) => voidA callback function called when the selected value changes.

SelectOption

The SelectOption component represents an option within a Select component. It defines the individual options that the user can choose from.

Props

The SelectOption component accepts the following props:

NameTypeDefaultDescription
valueanyThe value of the option.
iconstring | JSX.Element | React.ReactNode | React.ReactElementThe icon to display
labelstring | JSX.Element | React.ReactElement | React.ReactNodeThe label or text to display for the option. If not provided, the children of the SelectOption component will be used as the label.
childrenstring | JSX.Element | React.ReactElement | React.ReactNodeThe label or text to display for the option. If not provided, the label prop will be used as the label.
disabledbooleanfalseIf true, the option is disabled and cannot be selected.

Try It

Open on CodeSandboxOpen Sandbox
import { Select, SelectOption, Divider } from '@kloktun/uikit';
import { useState } from 'react'
import DuckIcon from './duck-icon.tsx'
import SearchIcon from './search-icon.tsx'

export default function SelectExample() {

    const [selectedValue, setSelectedValue] = useState('option1');

    const handleChange = (event: React.ChangeEvent<any>) => {
        setSelectedValue(event.target.value);
    };

  return (
        <Select value={selectedValue} onChange={handleChange} placeholder="Select an option">
            <SelectOption value="option1" icon={<DuckIcon />}>Option 1</SelectOption>
            <SelectOption value="option2">Option 2</SelectOption>
            <SelectOption value="option3" disabled>Option 3</SelectOption>
            <Divider />
            <SelectOption value="option4" icon={<SearchIcon />}>Option 4</SelectOption>
            <SelectOption value="option5">Option 5</SelectOption>
        </Select>
  );
}
RadioGroupDropdown