Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
@rmwc/select
Advanced tools
Menus display a list of choices on a transient sheet of material.
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"
/>
<Select
label="Required"
required
options={['Cookies', 'Pizza', 'Icecream']}
/>
<Select
label="Invalid"
invalid
options={['Cookies', 'Pizza', 'Icecream']}
/>
<Select
label="Disabled"
disabled
options={['Cookies', 'Pizza', 'Icecream']}
/>
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)}
/>
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']}
/>
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>
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>
A Select Component
Name | Type | Description |
---|---|---|
disabled | boolean | Makes the Select disabled. |
enhanced | EnhancedType | Renders a non native / enhanced dropdown |
foundationRef | Ref<MDCSelectFoundation<>> | Advanced: A reference to the MDCFoundation. |
helpText | ReactNode | SelectHelperTextProps | Adds help text to the field |
icon | IconPropT | Add a leading icon. |
inputRef | (ref: null | HTMLSelectElement<>) => void | A reference to the native select element. Not applicable when |
enhanced | ||
is true. | ||
invalid | boolean | Makes the Select visually invalid. This is sometimes automatically my material-components-web. |
label | string | A label for the form control. |
options | OptionsType | Options accepts flat arrays, value => label maps, and more. See examples for details. |
outlined | boolean | Makes the select outlined. |
placeholder | string | Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label. |
required | boolean | Makes the Select required. |
rootProps | Object | Props for the root element. By default, additional props spread to the native select element. |
value | string | The value for a controlled select. |
FAQs
RMWC Select component
We found that @rmwc/select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.