Select

A Select component allows users to choose a single option or multiple options from the provided list of options.

Basic

Your favorite container

Helper Text

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function Basic() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center px-8">
      <Select
        items={SelectItems}

Variants

Select supports 2 variants: defaultand ghost.

Your favorite container

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

type SelectVariant = 'default' | 'ghost';

const SELECT_VARIANTS: SelectVariant[] = ['default', 'ghost'];

export function Variants() {
  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);

Sizes

Select supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
Default size is lg.

Your favorite container

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

type SelectSize = 'sm' | 'md' | 'lg';

const SELECT_SIZES: SelectSize[] = ['sm', 'md', 'lg'];

export function Sizes() {
  const [selectedValue, setSelectedValue] = React.useState<string[]>([]);

With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
`xs` → `xl`	`0px` → `1279px`	sm
`xl` → `3xl`	`1280px` → `1919px`	md
`3xl` → `∞`	`1920px` → `∞`	lg

Your favorite container

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function SizesResponsive() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex gap-x-24 flex-col items-center">
      <Select
        items={SelectItems}

With Icons

Select supports icons from the @ocean-network-express/magenta-ui/icons package.
The prop leftContent support to add icon or other content to the left side.

Your favorite container

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function WithIcons() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center px-8">
      <Select

Alignment `Label`

Select supports 3 type of Alignment Label top, left and inline and can be changed by passing the labelAlignment prop.
Default Alignment is top.
When using inline Alignment with leftContent, the leftContent will be override by Label

Top align

Helper Text

Left align

Helper Text

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

type LabelAlignmentConfig = {
  alignment: 'top' | 'left' | 'inline';
  labelText: string;
};

const LABEL_ALIGNMENT_CONFIGS: LabelAlignmentConfig[] = [

Disabled

Disabled state can be enabled by setting disabled prop to true.

Label

Helper Text

Label

Helper Text

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItemsWithDisabled } from '../../utils/Select/helpers';

export function Disabled() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex flex-row gap-6 items-center justify-center">
      <Select

Loading

Loading state can be enabled by setting loading prop to true, when in loading state, the selected value will be replaced by placeholder text.

label

Helper Text

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItemsWithDisabled } from '../../utils/Select/helpers';

export function Loading() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex flex-row gap-20 justify-center">
      <Select

Helper text

Helper text can be changed by passing the helperText prop.
The helper text can be displayed in 2 ways: inline and tooltip and can be changed by passing the renderHelperType prop.

Inline (default)

Your favorite container

Helper Text

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function HelperTextDefault() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center px-8">
      <Select
        items={SelectItems}

Your favorite container

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function HelperTextTooltip() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center px-8">
      <Select
        items={SelectItems}

States

Currently, Select supports 3 state is error, warning and success and can be changed by passing the state prop.
As use case of the tooltip, you can use the renderHelperType='tooltip' to display the error message in the tooltip.
The tooltip content render by helperText prop value, and it accept ReactNode.

Inline (default)

Error

Error message goes here

Warning

Warning message goes here

Success

Success message goes here

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

type SelectStateConfig = {
  state: 'error' | 'warning' | 'success';
  label: string;
  helperText: string;
};

const SELECT_STATE_CONFIGS: SelectStateConfig[] = [

Error

Warning

Success

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

type SelectStateConfig = {
  state: 'error' | 'warning' | 'success';
  label: string;
  helperText: string;
};

const SELECT_STATE_CONFIGS: SelectStateConfig[] = [

Clearable

Set clearable prop to display the clear button in the right section. The button is not displayed when:
- The component does not have a value
- The component have a value but not opened, hovered or focused
- The component is disabled
- The component is readOnly

Your favorite container

Helper Text

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function Clearable() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center px-8">
      <Select
        items={SelectItems}

Using with `Form`

Remember to set name prop when using with form.
Select value must be an array string, other types are not supported. onValueChange function is called with an array string value as a single argument.

Label

Helper Text

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function OnValueChange() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center gap-6">
      <Select

Async `items`

Bellow is an example of how to use the Select component with ListLoading and ListEmpty components.

Your favorite container

Helper Text

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  ListEmpty,
  ListItemText,
  ListLoading,
  Select,
  type SelectItem,
  SelectOption,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

Controlled `open` state

You can control open Select component with open and onOpenChange props:

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  ListItemText,
  Select,
  SelectOption,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function Open() {

Multiple select

The Select component can handle multiple selections. It’s enabled with the multiple prop.
Like with the single selection, you can pull out the new value by accessing in the onValueChange callback. It’s always an array.

Default

Your favorite container

Helper Text

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function MultipleDefault() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center px-8">
      <div className="max-w-[300px] mx-auto">
        <Select

Checkboxes

Your favorite container

Helper Text

Source Code

import {
  Checkbox,
  ListItemText,
  Select,
  SelectOption,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function MultipleCheckboxes() {
  const [value, setValue] = React.useState<string[]>([]);

Limit Tags

You can use the limitTags prop to limit the number of displayed options when not focused.

Render Value Text Style

Render Value Tag Style

Dangerous Container

Dry Container

Flatrack Container

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function LimitTags() {
  const [value, setValue] = React.useState<string[]>(['1', '2', '3']);
  const [value2, setValue2] = React.useState<string[]>(['1', '2', '3']);

  return (
    <div className="flex justify-center px-8">
      <div className="grid gap-20 max-w-[400px]">

Limit Tags Idle

If true, the show/hide selected tags functionality will be disabled. All the selected tags that exceed limitTags number will be hidden.
Default is false.

Render Value Text Style

Render Value Tag Style

Option 1

Option 4

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { DefaultSelectItems } from '../../utils/Select/helpers';

export function LimitTagsIdle() {
  const [value, setValue] = React.useState<string[]>(['1', '4', '3']);
  const [value2, setValue2] = React.useState<string[]>(['1', '4', '3']);

  return (
    <div className="flex justify-center px-8">
      <div className="grid gap-5">

Custom Render Selected Items

You can customize the render of selected items by passing the renderSelectedItems prop.
The renderSelectedItems prop have type as a component that accept selectedItems and numberOfHiddenItem as props.

Source Code


renderSelectedItems?: React.FC<{
  selectedItems: SelectedItemTagProps<SelectItem>[];
  numberOfHiddenItem?: number | undefined;
}>

Source Code


type SelectedItemTagProps<TValue = SelectItem> = {
  item: TValue;
  onDeleted: () => void;
  className?: string;
  'data-visible-on-active'?: boolean;
  deletable?: boolean;
} & Pick<SelectProps, 'disabled' | 'readOnly' | 'size'>

Prop	Description
`item`	Selected item data type `SelectItem`
`onDeleted`	The built-in callback action to delete selected item
`className`	The built-in `className` prop for the selected item is passed to the `Tag` component
`deletable`	The built-in `deletable` prop for the selected item is passed to the `Tag` component
`data-visible-on-active`	The built-in prop for a component that displays the selected item. If `Select` is set to `limitTags`, this prop will trigger show/hide behavior for the selected item.
`disabled` \| `readOnly` \| `size`	The props pass for a component that displays the selected item from `Select`

Custom Render Value Style

Option 1

Option 4

Source Code

import { FileDataOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  ListItemText,
  Select,
  SelectOption,
  Tag,
  TagContent,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { DefaultSelectItems } from '../../utils/Select/helpers';

Grouping

Display categories with the ListSubheader component

Your favorite container

Helper Text

Source Code

import {
  ListItemText,
  ListSubheader,
  Select,
  SelectOption,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function Grouping() {
  const [value, setValue] = React.useState<string[]>(['1', '2', '3']);

Max Height

When there are too many selected options in select field, which may break the UI layout, you can set max height allowing the field to scroll through className.

Max height

Dangerous Container

Dry Container

Flatrack Container

Tank Container

Crane Container

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function MaxHeight() {
  const [value, setValue] = React.useState<string[]>(['1', '2', '3', '4', '5']);

  return (
    <div className="flex items-center justify-center px-8">
      <div className="w-[400px]">
        <Select

DropdownConfig

The dropdownConfig props allow you to set the CSS of the dropdown list.

Width/Height

Your favorite container

Helper Text

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function DropdownConfig() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex justify-center items-center gap-4">
      <div className="w-[500px]">
        <Select

Padding

The padding prop controls the overflow padding of the dropdown list relative to the viewport edges.

Your favorite container

Helper Text

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function DropdownConfigPadding() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center px-8">
      <Select
        items={SelectItems}

Padding Content

The paddingContent prop allows you to set the padding of the dropdown list content.

Your favorite container

Helper Text

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

export function DropdownConfigInnerPadding() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex items-center justify-center px-8">
      <Select
        items={SelectItems}

Strategy

The strategy prop allows you to control the positioning strategy of the popover.
The available strategies are absolute and fixed.
The default strategy is fixed.
View more details: Fixed position scrolling example.

Source Code


<Select dropdownConfig={{ strategy: 'fixed' }} {...otherProps}>
// render logic children
</Select>

Placement

If you want to place the popover anywhere relative to the button, use the dropdownConfig.placement prop.
The available base directions are top, right, bottom, left.
Each of these base placements has an alignment in the form [direction]-start and [direction]-end. For example, right-start, or bottom-end.
The default placement is bottom-start.

Bottom start

Top end

Right end

Left start

Source Code

import { ListItemText, Select, SelectOption } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { SelectItems } from '../../utils/Select/helpers';

const PLACEMENTS = [
  { placement: 'bottom-start' as const, label: 'Bottom start' },
  { placement: 'top-end' as const, label: 'Top end' },
  { placement: 'right-end' as const, label: 'Right end' },
  { placement: 'left-start' as const, label: 'Left start' },
];

Customized tags

You can customize the tag item by passing the renderTag prop.

Multiple tags

Option 1

Option 2

Option 3

Single tag

Source Code

import {
  Checkbox,
  ListItem,
  ListItemText,
  Select,
  SelectOption,
  Tag,
  TagContent,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomSelectItems, SelectItemsColor } from '../../utils/Select/helpers';

Custom Order Selected

Display selected tags following a custom order (e.g., the options list order) rather than click order.

Custom Order Selected

Source Code

import {
  Checkbox,
  ListItem,
  ListItemText,
  Select,
  SelectOption,
  Tag,
  TagContent,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomSelectItems, SelectItemsColor } from '../../utils/Select/helpers';

Re-order `ListItem`

Your favorite container

Option 1

Option 2 but with very long label

Option 3

Helper Text

Source Code

import {
  ListItemText,
  ListSubheader,
  Select,
  SelectOption,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { DefaultSelectItems } from '../../utils/Select/helpers';

export function ReOrderListItem() {
  const [value, setValue] = React.useState<string[]>(['1', '2', '3']);

You can re-oder selected list items by yourself with returned value from onValueChange call back.

Search Input & Select All

You can customize the tag item by passing the renderTag prop.

Searchable menu

Option 1

Option 2

Option 3

Source Code

import { InboxOutline, SearchOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Checkbox,
  Input,
  ListEmpty,
  ListItem,
  ListItemText,
  Select,
  SelectOption,
  Tag,
  TagContent,
} from '@ocean-network-express/magenta-ui/react';

Was this page helpful?

Select

Basic

Variants

Sizes

With Icons

Alignment Label

Disabled

Loading

Helper text

Inline (default)

Tooltip

States

Inline (default)

Tooltip

Clearable

Using with Form

Async items

Controlled open state

Multiple select

Default

Checkboxes

Tags

Limit Tags

Limit Tags Idle

Custom Render Selected Items

Grouping

Max Height

DropdownConfig

Width/Height

Padding

Padding Content

Strategy

Placement

Customized tags

Custom Order Selected

Re-order ListItem

Search Input & Select All

Alignment `Label`

Using with `Form`

Async `items`

Controlled `open` state

Re-order `ListItem`