woocommerce/plugins/woocommerce-admin/client/components/segmented-selection
Paul Sealock f48fdd2dea Segmented-selection: remove focus outline in favor of inset box-shadow 2018-08-30 08:21:59 +12:00
..
README.md Merge pull request woocommerce/woocommerce-admin#63 from woocommerce/add/segmented-selection 2018-05-24 11:19:21 +12:00
index.js init for legends PR 2018-07-25 17:04:03 +02:00
style.scss Segmented-selection: remove focus outline in favor of inset box-shadow 2018-08-30 08:21:59 +12:00

README.md

Segmented Selection

Create a panel of styled selectable options rendering stylized checkboxes and labels

Usage

const Numbers = () => {
	return (
		<SegmentedSelection
			options={ [
				{ value: 'one', label: 'One' },
				{ value: 'two', label: 'Two' },
				{ value: 'three', label: 'Three' },
				{ value: 'four', label: 'Four' },
			] }
			selected={ 'two' }
			legend="Select a number"
			onSelect={ data => { /* manipulate data here */ } }
			name="numbers"
		/>
	);
}

Props

Required props are marked with *.

Name Type Default Description
className string none Additional classNames
name* string none This will be the key in the key and value arguments supplied to onSelect
legend* string none Create a legend visible to screen readers
options* array none An Array of options to render. The array needs to be composed of objects with properties label and value.
selected string none Value of selected item
onSelect* function none Callback to be executed after selection