Select

import * as React from 'react';
import { LabeledSelect } from '@itwin/itwinui-react';

export default () => {
  return (
    <>
      <LabeledSelect
        label='Select label'
        message='Help message'
        placeholder='Labeled select'
        options={[
          { value: 1, label: 'Item #1' },
          { value: 2, label: 'Item #2' },
          { value: 3, label: 'Item #3' },
        ]}
      />
    </>
  );
};

import * as React from 'react';
import { LabeledSelect } from '@itwin/itwinui-react';
import {
  SvgSmileyHappy,
  SvgSmileySad,
  SvgSmileyNeutral,
} from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <LabeledSelect
      label={'Choose feeling'}
      options={[
        {
          value: 'happy',
          label: 'Happy',
          startIcon: <SvgSmileyHappy />,
        },
        {
          value: 'neutral',
          label: 'Neutral',
          startIcon: <SvgSmileyNeutral />,
        },
        {
          value: 'sad',
          label: 'Sad',
          startIcon: <SvgSmileySad />,
        },
      ]}
      placeholder={'How are you today?'}
    />
  );
};

import * as React from 'react';
import { LabeledSelect } from '@itwin/itwinui-react';

export default () => {
  return (
    <LabeledSelect
      disabled
      label={'Disabled Select Label'}
      options={[
        {
          value: 1,
          label: 'Item #1',
        },
        {
          value: 2,
          label: 'Item #2',
        },
        {
          value: 3,
          label: 'Item #3',
        },
      ]}
      placeholder={'Placeholder text'}
    />
  );
};

import * as React from 'react';
import { Select } from '@itwin/itwinui-react';

export default () => {
  const options = [
    {
      value: 1,
      label: 'Item #1',
      sublabel: 'Sublabel #1',
    },
    {
      value: 2,
      label: 'Item #2',
      sublabel: 'Sublabel #2',
    },
    {
      value: 3,
      label: 'Item #3',
      sublabel: 'Sublabel #3',
    },
  ];

  return (
    <Select
      triggerProps={{
        'aria-label': 'Select label',
      }}
      options={options}
      placeholder={'Placeholder text'}
      size={'large'}
    />
  );
};

import * as React from 'react';
import { MenuItem, LabeledSelect } from '@itwin/itwinui-react';

export default () => {
  const options = [
    {
      value: 'yellow',
      label: 'Yellow',
    },
    {
      value: 'green',
      label: 'Green',
    },
    {
      value: 'red',
      label: 'Red',
    },
  ];

  return (
    <LabeledSelect
      label={'Choose color'}
      options={options}
      placeholder={'Placeholder text'}
      itemRenderer={(option) => (
        <MenuItem
          style={{
            color: option.value,
          }}
        >
          {option.label}
        </MenuItem>
      )}
      selectedItemRenderer={(option) => (
        <span
          style={{
            backgroundColor: option.value,
          }}
        >
          {option.label}
        </span>
      )}
    />
  );
};

import * as React from 'react';
import {
  MenuItem,
  MiddleTextTruncation,
  LabeledSelect,
} from '@itwin/itwinui-react';
import { useCallback, useState } from 'react';

export default () => {
  const options = [
    {
      value:
        'MyFileWithAReallyLongNameThatWillBeTruncatedBecauseItIsReallyThatLongSoHardToBelieve_FinalVersion_V2.html',
      label:
        'MyFileWithAReallyLongNameThatWillBeTruncatedBecauseItIsReallyThatLongSoHardToBelieve_FinalVersion_V2.html',
    },
    {
      value: 'ShortNameFile.jpg',
      label: 'ShortNameFile.jpg',
    },
    {
      value: 'SomeOtherFile.dgn',
      label: 'SomeOtherFile.dgn',
    },
  ];
  const [selectedValue, setSelectedValue] = useState(options[0].value);
  const textRenderer = useCallback(
    (truncatedText, originalText) => (
      <span title={truncatedText !== originalText ? originalText : undefined}>
        {truncatedText}
      </span>
    ),
    [],
  );
  return (
    <LabeledSelect
      label={'Choose file'}
      options={options}
      value={selectedValue}
      onChange={setSelectedValue}
      placeholder={'Placeholder text'}
      itemRenderer={(option) => (
        <MenuItem>
          <MiddleTextTruncation
            text={option.label}
            textRenderer={textRenderer}
          />
        </MenuItem>
      )}
      selectedItemRenderer={(option) => (
        <MiddleTextTruncation text={option.label} textRenderer={textRenderer} />
      )}
    />
  );
};

import * as React from 'react';
import { LabeledSelect } from '@itwin/itwinui-react';

export default () => {
  return (
    <LabeledSelect
      native
      label='Fruit'
      options={[
        { value: 'apple', label: 'Apple' },
        { value: 'kiwi', label: 'Kiwi' },
        { value: 'orange', label: 'Orange' },
      ]}
      placeholder='Pick a fruit'
      required
    />
  );
};

import * as React from 'react';
import { Select } from '@itwin/itwinui-react';

export default () => {
  return (
    <Select
      native
      styleType='borderless'
      options={[
        { value: 'apple', label: 'Apple' },
        { value: 'kiwi', label: 'Kiwi' },
        { value: 'orange', label: 'Orange' },
      ]}
      triggerProps={{ 'aria-label': 'Fruit' }}
    />
  );
};