Select

A dropdown select component with ASCII styling and arrow indicator.

Installation

npm install react-ascii-ui

Usage

import { AsciiSelect } from 'react-ascii-ui';

export default function Example() {
  const [value, setValue] = useState('');

  return (
    <AsciiSelect 
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <option value="">Choose an option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </AsciiSelect>
  );
}

Examples

<AsciiSelect>
  <option>Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</AsciiSelect>

const [value, setValue] = useState('option2');

<AsciiSelect 
  value={value}
  onChange={(e) => setValue(e.target.value)}
>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</AsciiSelect>

<AsciiSelect disabled>
  <option>Disabled Select</option>
  <option>Cannot be selected</option>
</AsciiSelect>

API Reference

Props

AsciiSelect extends all HTML select attributes and React.SelectHTMLAttributes.