Version 0.40.0

UI Atoms

Forms controls

Classic controls

<input class="sui-a-form-control">

<select class="sui-a-form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<textarea class="sui-a-form-control"></textarea>

Inline controls

<input class="sui-a-form-control as--inline">

<select class="sui-a-form-control as--inline">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<textarea class="sui-a-form-control as--inline" rows="1"></textarea>

Primary controls

<input class="sui-a-form-control as--primary">

<select class="sui-a-form-control as--primary">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<textarea class="sui-a-form-control as--primary"></textarea>

Disabled controls

<input class="sui-a-form-control" disabled value="Value">

<select class="sui-a-form-control" disabled>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<textarea class="sui-a-form-control" disabled rows="1">Value</textarea>

Input validation states

<input class="sui-a-form-control as--danger" value="Value">

<input class="sui-a-form-control as--warning" value="Value">

<input class="sui-a-form-control as--success" value="Value">

<select class="sui-a-form-control as--danger">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="sui-a-form-control as--warning">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="sui-a-form-control as--success">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<textarea class="sui-a-form-control as--danger">Value</textarea>

<textarea class="sui-a-form-control as--warning">Value</textarea>

<textarea class="sui-a-form-control as--success">Value</textarea>

Controls with loader

To display a loader icon you need an encapsulating container with the .as--loading class.

<div class="sui-a-form-control as--loading">
    <input >
</div>

<div class="sui-a-form-control as--loading">
    <select >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

<div class="sui-a-form-control as--loading">
    <textarea ></textarea>
</div>

Controls with Choices.js

You can use Choices.js out of the box.
Don't load Choices.js css theme, saagie-ui handle it for you.

npm install choices.js@3.0.3 --save



<div class="sui-a-form-control">
    <select>
        <option placeholder>Placeholder...</option>
        <option value="Dropdown item 1" selected>Dropdown item 1</option>
        <option value="Dropdown item 2">Dropdown item 2</option>
        <option value="Dropdown item 3">Dropdown item 3</option>
        <option value="Dropdown item 4" disabled>Dropdown item 4</option>
    </select>
</div>

<div class="sui-a-form-control">
    <select multiple placeholder="Placeholder...">
        <option value="Dropdown item 1" selected>Dropdown item 1</option>
        <option value="Dropdown item 2">Dropdown item 2</option>
        <option value="Dropdown item 3">Dropdown item 3</option>
        <option value="Dropdown item 4" disabled>Dropdown item 4</option>
    </select>
</div>

<div class="sui-a-form-control">
    <select multiple placeholder="Placeholder...">
        <option value="Dropdown item 1">Dropdown item 1</option>
        <option value="Dropdown item 2">Dropdown item 2</option>
        <option value="Dropdown item 3">Dropdown item 3</option>
        <option value="Dropdown item 4">Dropdown item 4</option>
    </select>
</div>

<div class="sui-a-form-control">
    <input type="text" value="preset-1,preset-2" placeholder="Placeholder...">
</div>

React

Name: saagie-ui/atoms/FormControlSelect

Dependencies

React PropTypes

Example

Code Example

import React from 'react';
import { FormControlSelect } from 'saagie-ui/react';

const options = [
  { value: '1', label: 'Dropdown item 1', active: false, fixed: false, },
  { value: '2', label: 'Dropdown item 2', active: false, fixed: true, },
  { value: '3', label: 'Dropdown item 3', active: true, fixed: true, },
  { value: '4', label: 'Dropdown item 4', active: true, fixed: false, },
];

const groupOptions = [
  {
    label: 'Group 1',
    options: [
      { value: '1', label: 'Dropdown item 1', active: false, fixed: false, },
      { value: '2', label: 'Dropdown item 2', active: false, fixed: true, },
    ],
  },
  {
    label: 'Group 2',
    options: [
      { value: '3', label: 'Dropdown item 3', active: true, fixed: true, },
      { value: '4', label: 'Dropdown item 4', active: true, fixed: false, },
      { value: '5', label: 'Dropdown item 5', active: false, fixed: false, },
      { value: '6', label: 'Dropdown item 6', active: false, fixed: true, },
    ],
  },
];

const promiseOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(options);
    }, 10000);
  });

class FormControlExample extends React.Component {
  render() {
    return (
      <div>
        <h2>Classic select</h2>
        <FormControlSelect
          defaultValue={options[2]}
          options={options}
        />
        <h2>Select mulitple</h2>
        <FormControlSelect
          defaultValue={options[2]}
          options={options}
          isMulti
        />
        <h2>Select group options</h2>
        <FormControlSelect
          defaultValue={groupOptions[1][2]}
          options={groupOptions}
          isGroupOption
        />
        <h2>Primary select</h2>
        <FormControlSelect
          defaultValue={options[2]}
          options={options}
          isPrimary
        />
        <hr/>
        <FormControlSelect
          defaultValue={options[2]}
          options={options}
          isMulti
          isPrimary
        />
        <h2>Select disabled</h2>
        <FormControlSelect
          defaultValue={options[2]}
          options={options}
          isDisabled
        />
        <hr/>
        <FormControlSelect
          defaultValue={options[2]}
          options={options}
          isDisabled
          isMulti
        />
        <h2>Select option disabled example</h2>
        <FormControlSelect
          options={options}
          isOptionDisabled={(option) => option.active !== true}
          isMulti
        />
        <h2>Select creatable</h2>
        <FormControlSelect
          options={options}
          isCreatable
        />
        <hr/>
        <FormControlSelect
          options={options}
          isCreatable
          isMulti
        />
      <h2>Select async</h2>
        <FormControlSelect
          cacheOptions
          defaultOptions
          loadOptions={promiseOptions}
          isAsync
        />
        <h2>Select validation states</h2>
        <FormControlSelect
          options={options}
          isWarning
        />
        <hr/>
        <FormControlSelect
          options={options}
          isDanger
        />
        <hr/>
        <FormControlSelect
          options={options}
          isSucces
        />
      </div>
    );
  }
}

export default FormControlExample;

Arguments

Params Type Details
className (optional) string custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
isAsync (optional) bool True for async behavior refer to react-select async documentation.
isCreatable (optional) bool True for creatable behavior refer to react-select creatable documentation.
isDanger (optional) bool True for as--danger behavior.
isDisabled (optional) bool True for disabled behavior.
isGroupOption (optional) bool True for group options behavior. ⚠️ Follow the example object format. ⚠️
isPrimary (optional) bool True for as--primary behavior.
isSuccess (optional) bool True for as--success behavior.
isWarning (optional) bool True for as--warning behavior.
⚠️⚠️⚠️
Element based on react-select@2.0.0 you can override with all related props and options. Check the documentation for more advanced examples.
⚠️⚠️⚠️