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.

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	InputColor	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).

Sizes

One of 'small' | 'default' | 'medium' | 'large'

Name	Type	Value
small	string	Text size: FONT_SIZE.small Padding Vertical: FONT_SIZE.small * 0.5 Padding Horizonta: FONT_SIZE.small * 0.75 Helper text size: FONT_SIZE.small * 0.75 Label text size: for material FONT_SIZE.small * 0.78, default FONT_SIZE.small
default	string	Fonts size: FONT_SIZE.default Icon size: FONT_SIZE.default * 1.5 Padding Horizonta: FONT_SIZE.default * 0.75 Helper text size: FONT_SIZE.default * 0.75 Label text size: for material FONT_SIZE.default * 0.78, default FONT_SIZE.default
medium	string	Fonts size: FONT_SIZE.medium Icon size: FONT_SIZE.medium * 1.5 Padding Horizonta: FONT_SIZE.medium * 0.75 Helper text size: FONT_SIZE.medium * 0.75 Label text size: for material FONT_SIZE.medium * 0.78, default FONT_SIZE.medium
large	string	Fonts size: FONT_SIZE.large Icon size: FONT_SIZE.large * 1.5 Padding Horizonta: FONT_SIZE.large * 0.75 Helper text size: FONT_SIZE.large * 0.75 Label text size: for material FONT_SIZE.large * 0.78, default FONT_SIZE.large

BorderRadius

One of 'none' | 'small' | 'medium' | 'large' | 'full' | number

Name	Type	Value
none	number	0
small	number	2
medium	number	4
large	number	6
full	number	99999
	number	Any number value.

BorderWidth

One of 'none' | 'hairline' | 'thin' | 'base' | 'thick' | number

Name	Type	Value
none	number	0
hairline	StyleSheet.hairlineWidth	This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements.
thin	number	1
base	number	2
thick	number	3
	number	Any number value

InputColor

One of 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | ColorValue

Name	Type	Value	Preview
			Light	Dark
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
	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

Loading...

📄️ Default

The following examples demonstrates the FlexNative Check List in action.

📄️ Material

The following examples demonstrates the FlexNative Check List in action.