Language: ENCN

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

Prop Type Default Description
<ListItem>'s Smart Select specific properties
smartSelect boolean Converts list item to smart select list item
smartSelectSearchbar boolean Enables search bar for smart select page
smartSelectSearchbarPlaceholder string "Search" Smart select search bar search field placeholder text
smartSelectSearchbarCancel string "Cancel" Smart select search bar Cancel button text
smartSelectPageTitle string Smart select page title. Defaults to title prop
smartSelectBackText boolean "Back" Smart select page back-link text.
smartSelectBackOnSelect boolean Will close Smart Select page automatically after user selects any option
smartSelectOpenIn string "page" Defines how to open smart select: "page", "popup" or "picker"
smartSelectVirtualList boolean Enables Virtual list for smart select
smartSelectVirtualListHeight number Allows to specify virtual list item height
smartSelectNavbarTheme string Smart select navbar color theme. One of default colors
smartSelectFormTheme string Smart select form color theme. One of default colors