import { CellGroup } from '@uhg-abyss/mobile';Type Inheritance
When creating a CellGroup of type radio, checkbox, or toggle, it is important to use the type prop. Once a type prop is assigned to a CellGroup, every child will inherit the group's type and have access to all necessary providers preventing errors.
Below, you can see a few examples of type inheritance within CellGroup. Notice how Cell does not have the type prop, inheriting it from the CellGroup.
Toggle Switch CellGroup
Cells of type toggle contain the content of the cell with a ToggleSwitch on the right side. Toggle Cells will return a boolean of the selected value onChange.
Radio Group
Cells of type radio are required to be wrapped in a CellGroup with type radio. Reference the Type Inheritance section above for more information.
Radio Cells contain the content of the cell with a radio button on the right side, and return the selected value onChange.
Radio CellGroup requires the onChange and value props.
Checkbox Group
Cells of type checkbox are required to be wrapped in a CellGroup with type checkbox, reference the Type Inheritance section above for more information.
Checkbox Cells contain the content of the cell, with a checkbox on the right side.
Checkbox Cells works the same as a standard Checkbox Group, returning the selected cell values.
selectAll is a prop that can exist inside a Cell in a Checkbox CellGroup. This prop creates a select all checkbox that will select/deselect the entire checkbox list.
Checkbox CellGroup's require the onChange and value props.
isDisabled
isDisabled is a prop available for type radio, checkbox, and toggle.
When isDisabled is present in CellGroup, the entire group is disabled and cannot be modified. However, if isDisabled is present in Cell, only that cell is disabled and cannot be modified.
CellGroup Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The child cells in CellGroup |
| isDisabled | boolean | - | Disables the radio button, toggle, or checkbox inside of cell |
| onChange | function | - | Callback fired when the cell value is changed |
| type | "default" | "toggle" | "radio" | "checkbox" | - | The type of cell |
| value | string | boolean | - | The value of the cell |
It is the responsibility of consuming teams to make sure all components within CellGroup are accessible.
CellGroup Classes
| V2 | V1 | Status |
|---|---|---|
| - | cell-group-checkbox-group | Removed |
| - | cell-group-radio-group | Removed |
| - | cell-group-root | Removed |
CellGroup Props
| V2 | V1 | Status |
|---|---|---|
| children | children | Unchanged |
| - | data | Removed |
| - | fullBorder | Removed |
| - | hideBorderAll | Removed |
| - | hideBorderBottom | Removed |
| - | hideBorderTop | Removed |
| isDisabled | isDisabled | Unchanged |
| - | onAddCell | Removed |
| onChange | onChange | Unchanged |
| - | onRemoveCell | Removed |
| - | setData | Removed |
| - | title | Removed |
| type | type | Modified |
| value | value | Unchanged |