SelectCard API

API reference docs for theSelectCardcomponent. For examples and details on the usage of this component, visit the component demo page.

Props

Prop	Type	Description	Default
`controlType?`	`'checkbox' \| 'radio'`	The type of input element to render in each card.	`radio`
`isDisabled?`	`boolean`	Makes all cards in the group disabled. The checkbox / radio will be announced as disabled to screen-readers and styled to signify this.	`false`
`legend?`	`React.ReactNode`	The text description of the fieldset element. Renders the passed ReactNode as the first child of the fieldset, inside a `<legend>` element	_
`onChange`	`(value: string \| string[]) => void`	Callback to be called when the selected card(s) state changes.	_
`options`	`SelectCardOptionProps[]`	An array of options(objects) to be rendered.	_
`orientation?`	`'horizontal' \| 'vertical'`	Indicates whether the element's orientation is horizontal, vertical.	`horizontal`
`value`	`string[] \| string`	The value(s) of the selected card(s).	_

Note: For SelectCardOptionProps object please refer to the table below.

Prop	Type	Description	Default
`id?`	`string`	Defines an identifier (ID) which must be unique.	`undefined`
`directSlot`	`React.ReactNode`	Block of component to display after Radio or Checkbox, in same flex row.	_
`dynamicSlot?`	`React.ReactNode`	The Block of component to display below CardRow, will be visible only when option is checked.	_
`isDisabled?`	`boolean`	When true, the checkbox / radio will be announced as disabled to screen-readers and styled to signify this.	_
`name?`	`string`	The name of the option. Forwarded to CheckBox or Radio input internally.	_
`transitionHeightClass?`	`string`	Pass css `classNames` as string to transition height of expanded dynamic contents. When not passed there will not be any transition. Note: When passed container will not grow more than passed height as it has overflow-hidden	`horizontal`
`value`	`string`	The value of the option. Forwarded to CheckBox or Radio input internally.	_