Select

const PreviewEn = () => {
  return (
    <Field>
      <Label>Select a mountain</Label>
      <Select defaultValue=''>
        <Select.Option value='' disabled>
          Select a mountain &hellip;
        </Select.Option>
        <Select.Option value='everest'>Mount Everest</Select.Option>
        <Select.Option value='aconcagua'>Aconcagua</Select.Option>
        <Select.Option value='denali'>Denali</Select.Option>
        <Select.Option value='kilimanjaro'>Kilimanjaro</Select.Option>
        <Select.Option value='elbrus'>Elbrus</Select.Option>
        <Select.Option value='vinson'>Mount Vinson</Select.Option>
        <Select.Option value='puncakjaya'>Puncak Jaya</Select.Option>
        <Select.Option value='kosciuszko'>Mount Kosciuszko</Select.Option>
      </Select>
    </Field>
  );
};

render(<PreviewEn />)

const WithOptgroupEn = () => {
  return (
    <Field>
      <Label>Select a park</Label>
      <Select>
        <Select.Optgroup label='Grünerløkka'>
          <Select.Option value='sofienbergparken'>
            Sofienberg Park
          </Select.Option>
          <Select.Option value='birkelunden'>Birkelunden</Select.Option>
          <Select.Option value='olafryesplass'>Olaf Ryes Plass</Select.Option>
        </Select.Optgroup>
        <Select.Optgroup label='City centre'>
          <Select.Option value='slottsparken'>The Palace Park</Select.Option>
          <Select.Option value='studenterlunden'>Studenterlunden</Select.Option>
        </Select.Optgroup>
        <Select.Optgroup label='Old Oslo'>
          <Select.Option value='botsparken'>Botsparken</Select.Option>
          <Select.Option value='klosterenga'>Klosterenga Park</Select.Option>
        </Select.Optgroup>
      </Select>
    </Field>
  );
};

render(<WithOptgroupEn />)

const DisabledEn = () => {
  return (
    <Field>
      <Label>Select a mountain</Label>
      <Select disabled>
        <Select.Option value='blank'>Select &hellip;</Select.Option>
        <Select.Option value='everest'>Mount Everest</Select.Option>
      </Select>
    </Field>
  );
};

render(<DisabledEn />)

const ReadOnlyEn = () => {
  return (
    <Field>
      <Label>Select a mountain</Label>
      <Select readOnly value='everest'>
        <Select.Option value='everest'>Mount Everest</Select.Option>
      </Select>
    </Field>
  );
};

render(<ReadOnlyEn />)