Rohit UI
View on GitHub
Select Component
_
□
✕

Select

The Select component provides a Windows 98-style dropdown for choosing one option from a list.

Import

import { Select } from 'rohit-ui';

Examples

Basic Select
// Basic select with options
<Select 
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" }
  ]}
/>
Select with Label
// Select with label
<Select 
  label="Fruit"
  options={[
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Orange", value: "orange" }
  ]}
/>
Disabled Select
// Disabled select
<Select 
  options={[
    { label: "Can't touch this", value: "nope" }
  ]}
  disabled
/>
Select with onChange Handler
// Controlled select with state
const [value, setValue] = useState("apple");

<Select
  value={value}
  onChange={setValue}
  options={[
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" }
  ]}
/>
Rohit Mode Select
// Rohit Mode select
<Select 
  options={[
    { label: "Unnecessarily Complicated", value: "rohit" }
  ]}
  rohitMode
/>

Note: In Rohit Mode, the select will wiggle, randomly change its selected value, and sometimes refuse to open.

Props

Name Type Default Description
label string - Label text displayed next to the select
options Array<{ label: string, value: string }> [] Options to display in the dropdown
value string - Selected value
onChange function - Function called when the selected value changes
disabled boolean false Disables the select
rohitMode boolean false Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Select component using styled-components:

import styled from 'styled-components';
import { Select } from 'rohit-ui';

const CustomSelect = styled(Select)`
  .select-input {
    background: white;
    border: 2px solid var(--win98-navy);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.1em;
    color: var(--win98-navy);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    
    &:focus {
      outline: none;
      border-color: var(--win98-hot-pink);
      box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.2);
    }
  }
  
  .select-label {
    font-family: 'Comic Sans MS', sans-serif;
    color: var(--win98-navy);
    font-size: 1.1em;
    margin-bottom: 4px;
  }
`;

function MyComponent() {
  return (
    <CustomSelect
      label="Custom Select"
      value={value}
      onChange={setValue}
      options={[
        { value: "option1", label: "Option 1" },
        { value: "option2", label: "Option 2" }
      ]}
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Select component will:

  • Wiggle or bounce randomly
  • Change its selected value unexpectedly
  • Sometimes refuse to open
  • Draw unnecessary attention to itself