Segmented buttons allow users to toggle the selected states of grouped buttons.
npm install @rmwc/segmented-buttonSegmented buttons allow users to toggle the selected states of grouped buttons.
- Module @rmwc/segmented-button
- Import styles:
- Using CSS Loader
- import '@rmwc/segmented-button/styles';
- Or include stylesheets
- '@material/segmented-button/dist/mdc.segmented-button.css'
- '@rmwc/@rmwc/icon/icon.css'
- '@material/ripple/dist/mdc.ripple.css'
- MDC Docs: https://material.io/develop/web/components/segmented-button/
``jsx`
function Example() {
const [selected, setSelected] = React.useState({
cookies: false,
pizza: false,
icecream: false
});
const toggleSelected = (key) =>
setSelected({ ...selected, [key]: !selected[key] });
return (
value="cookies"
onClick={() => toggleSelected('cookies')}
selected={selected.cookies}
/>
value="pizza"
onClick={() => toggleSelected('pizza')}
selected={selected.pizza}
/>
label="Button"
value="icecream"
onClick={() => toggleSelected('icecream')}
selected={selected.icecream}
/>
);
}
`jsx`
function Example() {
const [selected, setSelected] = React.useState('icecream');
return (
value="cookies"
onClick={(evt) => setSelected(evt.currentTarget.value)}
selected={selected === 'cookies'}
/>
value="pizza"
onClick={(evt) => setSelected(evt.currentTarget.value)}
selected={selected === 'pizza'}
/>
label="Button"
value="icecream"
onClick={(evt) => setSelected(evt.currentTarget.value)}
selected={selected === 'icecream'}
/>
);
}
`jsxtouch
<>
{/* Wrapping a button in TouchTargetWrapper will automatically set its prop to true. /}`
| Name | Type | Description |
|------|------|-------------|
| selectType | "multiple" \| "single"` | Determines whether the user is able to select multiple or a single button at a time. Default to multiple. |