@arterial/select v3.0.0

Arterial Select

Another React Material Select

Installation

npm install @arterial/select

Usage

Styles

Sass

@use "@material/floating-label/index.scss" as floating-label;
@use "@material/line-ripple/index.scss" as line-ripple;
@use "@material/notched-outline/index.scss" as notched-outline;
@use "@material/select/select.scss" as select;
@use "@material/select/select-helper-text.scss" as select-helper-text;
@use "@material/select/select-icon.scss" as select-icon;
@include floating-label.core-styles;
@include line-ripple.core-styles;
@include notched-outline.core-styles;
@include select-helper-text.helper-text-core-styles;
@include select-icon.icon-core-styles;
@include select.core-styles;

CSS

import '@material/select/dist/mdc.select.css';

JSX

import {Select} from '@arterial/select';

Filled Select

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Filled() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="Filled"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Outlined Select

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Outlined() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="Outlined"
      label="Outlined"
      onSelect={handleSelect}
      options={OPTIONS}
      outlined
      value={value}
    />
  );
}

Other Variants

Leading Icon

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function LeadingIcon() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      icon="restaurant_menu"
      id="filled-leading-icon"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Invalid

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Invalid() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-invalid"
      invalid
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Label Floating

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function LabelFloating() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-label-floating"
      label="Filled"
      labelFloating
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Menu Width

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function MenuWidth() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-menu-width"
      label="Filled"
      menuWidth="100%"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

No Label

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function NoLabel() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-no-label"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Placeholder

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Placeholder() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-placeholder"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      placeholder="Placeholder"
      value={value}
    />
  );
}

Required

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Required() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-required"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      required
      value={value}
    />
  );
}

Loader

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Loader() {
  const [value, setValue] = useState('');
  const [loading, setLoading] = useState(false);
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <>
      <Button
        label="Start Loader"
        onClick={() => {
          setLoading(true);
          setTimeout(() => {
            setLoading(false);
          }, 5000);
        }}
        style={{marginBottom: '8px'}}
      />
      <Select
        disabled={loading}
        id="filled-loader"
        label="Filled"
        labelFloating
        onSelect={handleSelect}
        options={OPTIONS}
        placeholder={loading ? 'Loading...' : null}
        trailingIcon={loading ? <CircularProgress small /> : null}
        value={value}
      />
    </>
  );
}

Disabled

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Disabled() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      disabled
      id="filled-disabled"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Helper Text Object

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function HelperTextObject() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      helperText={{
        validationMsg: true,
        validationMsgPersistent: true,
        text: 'Helper text as object.',
      }}
      id="filled-helper-text-object"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Helper Text Component

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function HelperTextComponent() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      helperText={
        <HelperText
          validationMsgPersistent
          validationMsg
          text="Helper text as component."
        />
      }
      id="filled-helper-text-component"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Pre-selected Option

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function PreSelected() {
  const [value, setValue] = useState('banana');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-pre-selected"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Disabled Options

const DISABLED_OPTIONS = [
  {text: 'Apple', value: 'apple', disabled: true},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function DisabledOptions() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-disabled-options"
      label="Filled"
      onSelect={handleSelect}
      options={DISABLED_OPTIONS}
      value={value}
    />
  );
}

Enhanced Options

The option object in the options array must have text and value props. The option object also accepts disabled, graphic, node, and meta props. The graphic and meta props will appear as they do on a list item component. The node prop is for any element/elements to be displayed to right of list item text. You can use selectedText to convert an node that displays an icon into text when the option is selected. For example if you have a lock icon in your option, then you can use selectedText to make it appear as '(Private)'.

const ENHANCED_OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {
    text: 'Orange',
    value: 'orange',
    node: (
      <Icon
        icon="favorite"
        style={{color: 'rgba(0,0,0,.38)', marginLeft: '8px'}}
      />
    ),
    selectedText: 'Orange (Favorite)',
  },
];
function EnhancedOptions() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-enhanced-options"
      label="Filled"
      onSelect={handleSelect}
      options={ENHANCED_OPTIONS}
      value={value}
    />
  );
}

Props

Select

NOTE: Options shape is { disabled: boolean, graphic: node, meta: node, node: node, secondaryText: string, selectedText: string, text: string, value: string }

HelperText