Skip Navigation
React Magma

Native Select

Native Select uses the magma Select styling with a browser default option menu for compatibility purposes.

Basic Usage

import React from 'react';


import { NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <NativeSelect labelText="Select this" fieldId="example-basic">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </NativeSelect>
  );
}

Uncontrolled Select

import React from 'react';


import { NativeSelect } from 'react-magma-dom';


export function Example() {
  const [message, setMessage] = React.useState('');
  const handleChange = event => {
    setMessage(event.target.value);
  };
  return (
    <div>
      <p>
        <strong>Changed Value: </strong>{' '}
        <span id="changedValue">{message}</span>
      </p>
      <NativeSelect
        labelText="Test value"
        onChange={handleChange}
        fieldId="example-uncontrolled"
      >
        <option>Choose Color</option>
        <option value="Red">Red</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
      </NativeSelect>
    </div>
  );
}

Controlled Select

import React from 'react';


import { NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <NativeSelect
      labelText="Test value"
      value="Green"
      fieldId="example-controlled"
    >
      <option>Choose Color</option>
      <option value="Red">Red</option>
      <option value="Green">Green</option>
      <option value="Blue">Blue</option>
    </NativeSelect>
  );
}

Disabled

import React from 'react';


import { NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <NativeSelect labelText="Select this" disabled fieldId="example-disabled">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </NativeSelect>
  );
}

Error

import React from 'react';


import { NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <NativeSelect
      labelText="Select this"
      errorMessage="This is an error"
      fieldId="example-error"
    >
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </NativeSelect>
  );
}

Helper Message

import React from 'react';


import { NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <NativeSelect
      labelText="Select this"
      helperMessage="Helper message appears here"
      fieldId="example-helper"
    >
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </NativeSelect>
  );
}

Additional Content

When a native select needs additional context related to the user, additionalContent allows child elements to help. It is encouraged to use this prop with a Tooltip wrapping an IconButton.

By default, the child element will display inline with a NativeSelect label on the right.

When labelPosition is set to left, the label, native select, and child elements all display inline.

import React from 'react';


import {
  NativeSelect,
  LabelPosition,
  Tooltip,
  IconButton,
  ButtonSize,
  ButtonType,
  ButtonVariant,
} from 'react-magma-dom';
import { HelpIcon } from 'react-magma-icons';


export function Example() {
  const helpLinkLabel = 'Learn more';
  const onHelpLinkClick = () => {
    alert('Help link clicked!');
  };


  return (
    <>
      <NativeSelect
        labelText="Default positioning"
        fieldId="example-additionalContent"
        additionalContent={
          <Tooltip content={helpLinkLabel}>
            <IconButton
              aria-label={helpLinkLabel}
              icon={<HelpIcon />}
              onClick={onHelpLinkClick}
              type={ButtonType.button}
              size={ButtonSize.small}
              variant={ButtonVariant.link}
            />
          </Tooltip>
        }
      >
        <option>Red</option>
        <option>Green</option>
        <option>Blue</option>
      </NativeSelect>
      <br />
      <NativeSelect
        labelText="Left positioning"
        labelPosition={LabelPosition.left}
        additionalContent={
          <Tooltip content={helpLinkLabel}>
            <IconButton
              aria-label={helpLinkLabel}
              icon={<HelpIcon />}
              onClick={onHelpLinkClick}
              type={ButtonType.button}
              size={ButtonSize.small}
              variant={ButtonVariant.link}
            />
          </Tooltip>
        }
      >
        <option>Red</option>
        <option>Green</option>
        <option>Blue</option>
      </NativeSelect>
    </>
  );
}

Inverse

The isInverse prop will render a dark background and light text. The children will inherit the isInverse prop unless specified otherwise.

import React from 'react';


import { Card, CardBody, magma, NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse style={{ marginBottom: magma.spaceScale.spacing04 }}>
      <CardBody>
        <NativeSelect
          labelText="Select this"
          isInverse
          fieldId="example-inverse"
        >
          <option>Red</option>
          <option>Green</option>
          <option>Blue</option>
        </NativeSelect>
      </CardBody>
    </Card>
  );
}

Inverse Disabled

import React from 'react';


import { Card, CardBody, magma, NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse style={{ marginBottom: magma.spaceScale.spacing04 }}>
      <CardBody>
        <NativeSelect
          labelText="Select this"
          isInverse
          disabled
          fieldId="example-inverseDisabled"
        >
          <option>Red</option>
          <option>Green</option>
          <option>Blue</option>
        </NativeSelect>
      </CardBody>
    </Card>
  );
}

Inverse with Error

import React from 'react';


import { Card, CardBody, magma, NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse style={{ marginBottom: magma.spaceScale.spacing04 }}>
      <CardBody>
        <NativeSelect
          labelText="Select this"
          isInverse
          errorMessage="This is an error"
          fieldId="example-inverseError"
        >
          <option>Red</option>
          <option>Green</option>
          <option>Blue</option>
        </NativeSelect>
      </CardBody>
    </Card>
  );
}

Inverse Helper Message

import React from 'react';


import { Card, CardBody, magma, NativeSelect } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse style={{ marginBottom: magma.spaceScale.spacing04 }}>
      <CardBody>
        <NativeSelect
          labelText="Select this"
          isInverse
          helperMessage="Helper message appears here"
          fieldId="example-inverseHelper"
        >
          <option>Red</option>
          <option>Green</option>
          <option>Blue</option>
        </NativeSelect>
      </CardBody>
    </Card>
  );
}

NativeSelect Props

Any other props supplied will be provided to the wrapping select element.

additionalContent

Description

Content above the select. For use with Icon Buttons to relay information.

Type

React.ReactNode

Default

-

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

testId

Type

string

Default

-

On this page

Deploys by Netlify