Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@rmwc/select

Package Overview
Dependencies
Maintainers
0
Versions
179
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rmwc/select

RMWC Select component

  • 14.3.5
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

Select Menus

Menus display a list of choices on a transient sheet of material.

  • Module @rmwc/select
  • Import styles:
    • Using CSS Loader
      • import '@rmwc/select/styles';
    • Or include stylesheets
      • '@rmwc/select/select.css'
      • '@material/select/dist/mdc.select.css'
      • '@material/floating-label/dist/mdc.floating-label.css'
      • '@material/notched-outline/dist/mdc.notched-outline.css'
      • '@material/line-ripple/dist/mdc.line-ripple.css'
      • '@material/list/dist/mdc.list.css'
      • '@material/menu/dist/mdc.menu.css'
      • '@material/menu-surface/dist/mdc.menu-surface.css'
      • '@material/ripple/dist/mdc.ripple.css'
  • MDC Docs: https://material.io/develop/web/components/input-controls/select-menus/

Select Styles

Selects come in three different styles: standard, outlined, and enhanced.

<Select label="Standard" options={['Cookies', 'Pizza', 'Icecream']} />
<Select
  label="Outlined"
  outlined
  options={['Cookies', 'Pizza', 'Icecream']}
/>
<Select
  label="Enhanced"
  enhanced
  options={['Cookies', 'Pizza', 'Icecream']}
/>
<Select
  defaultValue="Cookies"
  label="Enhanced"
  enhanced={{ renderToPortal: true, anchorCorner: 'topLeft' }}
  options={['Cookies', 'Pizza', 'Icecream']}
/>
<Select
  label="With Icon"
  defaultValue="Pizza"
  helpText="Choose your favorite snack..."
  icon="favorite"
  options={['Cookies', 'Pizza', 'Icecream']}
/>

Select v14 from material-components-web has no width by default. The RMWC team has taken an active choice of giving Select a default width of 200px to stay true to the RMWC principle of introducing no breaking changes.

<Select
  label="Overwritten width"
  options={['Cookies', 'Pizza', 'Icecream']}
  className="rmwc-select-readme-example"
/>

Validation

<Select
  label="Required"
  required
  options={['Cookies', 'Pizza', 'Icecream']}
/>
<Select
  label="Invalid"
  invalid
  options={['Cookies', 'Pizza', 'Icecream']}
/>
<Select
  label="Disabled"
  disabled
  options={['Cookies', 'Pizza', 'Icecream']}
/>

Controlled / Uncontrolled

The Select component has the same behaviors as a native HTML select and be both controlled and uncontrolled.

function Example() {
  const [value, setValue] = React.useState('Cookies');
  return (
    <Select
      label="Controlled"
      options={['Cookies', 'Pizza', 'Icecream']}
      value={value}
      onChange={(evt) => setValue(evt.currentTarget.value)}
    />
  );
}
<Select
  label="Uncontrolled"
  options={['Cookies', 'Pizza', 'Icecream']}
  defaultValue="Cookies"
  onChange={(evt) => console.log(evt.currentTarget.value)}
/>

Data Driven Selects

To fit common use cases, RMWC Select provides a data driven method for rendering select menus. There are multiple formats you can pass data in, use the one that best fits your requirements. To make your label not float by default and to have an unselected blank value, set the placeholder prop to a blank string.

function Example() {
  // A controlled select Using a formatted array of options
  const options = [
    {
      label: 'Cookies',
      value: '1'
    },
    {
      label: 'Pizza',
      value: '2',
      /** Any additional items will be passed to the
         child ListItem as props */
      'aria-disabled': true,
      tabIndex: -1
    },
    {
      label: 'Icecream',
      value: '3'
    }
  ];

  return <Select label="Array" options={options} />;
}
<Select
  label="Object map"
  options={{ '1': 'Cookies', '2': 'Pizza', '3': 'Icecream' }}
/>
<Select
  label="Simple Array"
  placeholder="-- Select One --"
  options={['Cookies', 'Pizza', 'Icecream']}
/>

Manually Building the List

If you want full control over the child ListItems, you can manually build the list yourself.

<Select label="Manual" defaultValue="Cookies">
  <option value="Cookies">Cookies</option>
  <option value="Pizza">Pizza</option>
  <option value="Icecream">Icecream</option>
</Select>

Option Groups

Both native and enhanced Selects can contain option groups. Just nest additional options arrays in your data.

<Select
  label="Formatted"
  enhanced
  options={[
    {
      label: 'Dinner',
      options: [
        {
          label: 'Pizza',
          value: '2'
        }
      ]
    },
    {
      label: 'Dessert',
      options: [
        {
          label: 'Cookies',
          value: '1'
        },

        {
          label: 'Icecream',
          value: '3'
        }
      ]
    }
  ]}
/>
<Select label="Manually Built">
  <optgroup label="Dinner">
    <option value="Pizza">Pizza</option>
  </optgroup>
  <optgroup label="Dessert">
    <option value="Cookies">Cookies</option>
    <option value="Icecream">Icecream</option>
  </optgroup>
</Select>

Select

A Select Component

Props

NameTypeDescription
disabledbooleanMakes the Select disabled.
enhancedEnhancedTypeRenders a non native / enhanced dropdown
foundationRefRef<MDCSelectFoundation<>>Advanced: A reference to the MDCFoundation.
helpTextReactNode | SelectHelperTextPropsAdds help text to the field
iconIconPropTAdd a leading icon.
inputRef(ref: null | HTMLSelectElement<>) => voidA reference to the native select element. Not applicable when
enhanced
is true.
invalidbooleanMakes the Select visually invalid. This is sometimes automatically my material-components-web.
labelstringA label for the form control.
optionsOptionsTypeOptions accepts flat arrays, value => label maps, and more. See examples for details.
outlinedbooleanMakes the select outlined.
placeholderstringPlaceholder text for the form control. Set to a blank string to create a non-floating placeholder label.
requiredbooleanMakes the Select required.
rootPropsObjectProps for the root element. By default, additional props spread to the native select element.
valuestringThe value for a controlled select.

Keywords

FAQs

Package last updated on 24 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc