Check List

FlexNative Checkbox is part of the @flexnative/inputs package. To use the FlexNative Checkbox you needs to install @flexnative/inputs package. Fallow this link on how to install the package.

React component that allows users to select items from a list. Component extending React.PureComponent, which is optimized for performance by implementing a shallow prop and state comparison. It supports both single and multiple selection modes based on the 'multipleSelect' prop. The component maintains its selected items in the state and updates the selection when an item is pressed. It also provides styling options through various props and handles rendering of labels and helper text conditionally.

API

import { CheckList, CheckListProps } from '@flexnative/inputs';

Component

CheckList

Type: React.PureComponent<CheckListProps<T>>

Properties

Name	Type	Required	Default Value	Description
value	`T ❘ Array<T>`	false	`undefined`	Representing selected value/values from the available list.
valueField	`string`	false	`undefined`	When the selected item is an object, always specify valueField. If you do not set a value for the field, the list will compare the items by reference, which may complicate debugging. For example, the selected value will not be applied, if it does not reference the exact passed data object.
type	`InputType`	false	`outlined`	Checklist borders mode.
multipleSelect	`boolean`	false	`true`	Boolean value for single or multiple selection.
size	`Sizes`	false	`normal`	Check list sizes.
radius	`BorderRadius`	false	`medium`	Check list border radius.
borderWidth	`BorderWidth`	false	`hairline`	Check list borders width.
borderColor	`ColorValue`	false	`undefined`	Borders color according `react-native` ColorValue.
disabled	`boolean`	false	`false`	Indicator if input it is disabled or not.
color	`Color`	false	`theme.color.default`	Color by theme or a custom color according `react-native` ColorValue.
backgroundColor	`ColorValue`	false	`undefined`	Input background color.
label	`string` or `React.ReactElement`	false	`undefined`	A `string` value to display as labal, or `React.ReactElement` to display a custom element as a label.
labelStyle	`StyleProp<TextStyle>` or `((state: StateCallbackType) => StyleProp<TextStyle>)`	false	`undefined`	Either text styles or a function that receives a boolean reflecting whether the component is currently active and returns text styles.
onChange	`(event: NativeSyntheticEvent<CheckboxEvent<T> ❘ SyntheticEvent<HTMLInputElement, <CheckboxEvent<T>>) => void;`	false	`undefined`	Callback that is invoked when the user presses the checkbox.
onValueChange	`(value: T) => void`	false	`undefined`	Callback that is invoked when the user presses the checkbox.
direction	`'row' \| 'column'`	false	`column`	Check element direction.
material	`boolean`	false	`false`	Indicator if input should looks like Material input.
helperText	`string`	false	`undefined`	Helper text about input.
children	`Array<CheckProps<T>>`	false	`undefined`	React element to render custom check boxes.

InputType

One of 'outlined' | 'underlined'

Name	Type	Description
outlined	`string`	Property to set check list with borders.
underlined	`string`	Property to set check list underlined, (with only bottom border).

Color

Name	Type	Value	Preview
Name	Type	Value	Light	Dark
white	`ColorValue`	`theme.colors.white`	`#FFFFFF`	`#FFFFFF`
black	`ColorValue`	`theme.colors.black`	`#424242`	`#424242`
background	`ColorValue`	`theme.colors.background`	`#f8f8f8`	`#000000`
default	`ColorValue`	`theme.colors.default`	`#f5f5f5`	`#404040`
card	`ColorValue`	`theme.colors.card`	`#ffffff`	`#232323`
text	`ColorValue`	`theme.colors.text`	`#424242`	`#ffffff`
border	`ColorValue`	`theme.colors.border`	`#42424226`	`#ffffff1A`
placeholder	`ColorValue`	`theme.colors.placeholder`	`#0000001A`	`#FFFFFF1A`
info	`ColorValue`	`theme.colors.info`	`#3e80ed`	`#3e80ed`
success	`ColorValue`	`theme.colors.success`	`#5ec232`	`#5ec232`
warning	`ColorValue`	`theme.colors.warning`	`#ffc107`	`#ffc107`
error	`ColorValue`	`theme.colors.error`	`#d51923`	`#d51923`
dark	`ColorValue`	`theme.colors.dark`	`#424242`	`#424242`
secondary	`ColorValue`	`theme.colors.secondary`	`#666666`	`#5C5C5C`
light	`ColorValue`	`theme.colors.light`	`#ebebeb`	`#ebebeb`
primary	`ColorValue`	`theme.colors.primary`	`#ff6358`	`#ff6358`
overlay	`ColorValue`	`theme.colors.overlay`	`#00000021`	`#FFFFFF21`
	`ColorValue`	Any `ColorValue` chosen by developer.

Playground

Live Editor

//Play with props to see live changes;

function CheckListPlayground() {
  const [textValues, setTextValues] = useState(['1', '2', '3']);

  return (
    <CheckList label='Check list label'
              value={textValues}
              color='success'
              size='large'
              backgroundColor='default'
              borderColor='info'
              borderWidth='thick'
              radius='medium'
              onValueChange={(newValues) => setTextValues([...newValues])}>
      <Check value='1' label='Check 1' />
      <Check value='2' label='Check 2' />
      <Check value='3' label='Check 3' color='primary' />
    </CheckList>
  );
}

render(<CheckListPlayground />);

Result

📄️ Default

The following examples demonstrates the FlexNative Check List in action.

📄️ Material

The following examples demonstrates the FlexNative Check List in action.

API​

Component​

Properties​

InputType​

Color​

Playground​