Prism Docs

import { Select } from '@mylighthouse/prism-react';

const CITY_OPTIONS = [
  { value: null, label: 'Select a city' },
  { value: 'new-york', label: 'New York' },
  { value: 'los-angeles', label: 'Los Angeles' },
];

export default function SelectDefault(): React.JSX.Element {
  return (
    <Select options={CITY_OPTIONS}>
      <Select.Trigger />
      <Select.Menu>
        {CITY_OPTIONS.map(({ value, label }) => (
          <Select.Option key={value} value={value}>
            {label}
          </Select.Option>
        ))}
      </Select.Menu>
    </Select>
  );
}

import { Select } from '@mylighthouse/prism-react';

const CITY_OPTIONS = [
  { value: null, label: 'Select a city' },
  { value: 'new-york', label: 'New York' },
  { value: 'los-angeles', label: 'Los Angeles' },
];

export default function SelectValidation(): React.JSX.Element {
  return (
    <div className="flex gap-300">
      <Select hasError options={CITY_OPTIONS}>
        <Select.Trigger />
        <Select.Menu>
          {CITY_OPTIONS.map(({ value, label }) => (
            <Select.Option key={value} value={value}>
              {label}
            </Select.Option>
          ))}
        </Select.Menu>
      </Select>

      <Select hasWarning options={CITY_OPTIONS}>
        <Select.Trigger />
        <Select.Menu>
          {CITY_OPTIONS.map(({ value, label }) => (
            <Select.Option key={value} value={value}>
              {label}
            </Select.Option>
          ))}
        </Select.Menu>
      </Select>
    </div>
  );
}

import { Select } from '@mylighthouse/prism-react';

const CITY_OPTIONS = [
  { value: null, label: 'Select a city' },
  { value: 'new-york', label: 'New York' },
  { value: 'los-angeles', label: 'Los Angeles' },
];

export default function SelectSize(): React.JSX.Element {
  return (
    <div className="flex gap-300 items-center">
      <Select isSmall options={CITY_OPTIONS}>
        <Select.Trigger />
        <Select.Menu>
          {CITY_OPTIONS.map(({ value, label }) => (
            <Select.Option key={value} value={value}>
              {label}
            </Select.Option>
          ))}
        </Select.Menu>
      </Select>
    </div>
  );
}

import { Select } from '@mylighthouse/prism-react';

const CITY_OPTIONS = [
  { value: null, label: 'Select a city' },
  { value: 'new-york', label: 'New York' },
  { value: 'los-angeles', label: 'Los Angeles' },
];

export default function SelectDisabled(): React.JSX.Element {
  return (
    <Select disabled options={CITY_OPTIONS}>
      <Select.Trigger />
      <Select.Menu>
        {CITY_OPTIONS.map(({ value, label }) => (
          <Select.Option key={value} value={value}>
            {label}
          </Select.Option>
        ))}
      </Select.Menu>
    </Select>
  );
}

import { Select } from '@mylighthouse/prism-react';

const CITY_OPTIONS = [
  { value: 'new-york', label: 'New York' },
  { value: 'los-angeles', label: 'Los Angeles' },
  { value: 'chicago', label: 'Chicago' },
];

export default function SelectMultiple(): React.JSX.Element {
  return (
    <Select multiple options={CITY_OPTIONS}>
      <Select.Trigger>
        {(value: string[]) => {
          if (value.length === 0) {
            return 'Select cities';
          }

          if (value.length === 1) {
            return '1 city selected';
          }

          return `${value.length} cities selected`;
        }}
      </Select.Trigger>
      <Select.Menu>
        {CITY_OPTIONS.map(({ value, label }) => (
          <Select.Option key={value} value={value}>
            {label}
          </Select.Option>
        ))}
      </Select.Menu>
    </Select>
  );
}