Smart Select React Component

Smart Select allows you to easily convert your usual form selects to dynamic pages with grouped radio inputs. You can see such feature in many native apps.

Smart Select is not a separate component, but just a particular case of using <List> and <ListItem> components.

Usage example

<List form>
  <!-- Enables Smart Select behavior by adding "smart-select" prop -->
  <ListItem smartSelect title="Fruit">
    <!-- Select with values inside. Note how defaultValues are set in React on the actual select element as opposed to setting 'selected' on the option tag. -->
    <select name="fruits" defaultValue="apple">
      <option value="apple">Apple</option>
      <option value="pineapple">Pineapple</option>
      <option value="pear">Pear</option>
      <option value="orange">Orange</option>
      <option value="melon">Melon</option>
      <option value="peach">Peach</option>
      <option value="banana">Banana</option>
    </select>
  </ListItem>
  <!-- Multiple Smart Select With Searchbar -->
  <ListItem smartSelect smartSelectSearchbar title="Car">
    <select name="car" multiple="multiple" defaultValue={['honda', 'audi', 'ford']}>
      <optgroup label="Japanese">
        <option value="honda">Honda</option>
        <option value="lexus">Lexus</option>
        <option value="mazda">Mazda</option>
        <option value="nissan">Nissan</option>
        <option value="toyota">Toyota</option>
      </optgroup>
      <optgroup label="German">
        <option value="audi">Audi</option>
        <option value="bmw">BMW</option>
        <option value="mercedes">Mercedes</option>
        <option value="vw">Volkswagen</option>
        <option value="volvo">Volvo</option>
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        <option value="dodge">Dodge</option>
        <option value="ford">Ford</option>
      </optgroup>
    </select>
  </ListItem>
  <!-- With back on select -->
  <ListItem smartSelect smartSelectBackOnSelect title="Mac or Windows">
    <select name="mac-windows">
      <option value="mac">Mac</option>
      <option value="windows">Windows</option>
    </select>
  </ListItem>
</List>

Properties