Material

The following examples demonstrates the FlexNative Check List in action.

Usecase Examples

Usecase Examples with material style.

Value

Preview
Code

Value



primary

secondary

info

[
  {
    "id": 1,
    "color": "primary"
  }
]

Value field



primary

secondary

info

[
  "primary"
]

Value field



[
  1
]

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type ItemProps = { id: number, color: string; };

type StateType = {
  valueNumber: Array<number>,
  valueString: Array<string>,
  valueObject: Array<ItemProps>,
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      valueNumber: [1],
      valueString: ['primary'],
      valueObject: [{id: 1, color: 'primary'}]
    }
    
    this.handleValueNumberChange = this.handleValueNumberChange.bind(this);
    this.handleValueStringChange = this.handleValueStringChange.bind(this);
    this.handleValueObjectChange = this.handleValueObjectChange.bind(this);
  }

  public handleValueNumberChange(value: Array<number>) {
    this.setState({valueNumber: value as Array<number>});
  }

  public handleValueStringChange(selectedItems: Array<string>) {
    this.setState({valueString: selectedItems});
  }

  public handleValueObjectChange(selectedItems: Array<ItemProps>) {
    this.setState({valueObject: selectedItems});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <CheckList material label='Value' valueField={'id'} value={this.state.valueObject} onValueChange={this.handleValueObjectChange}>
          <Check value={{id: 1, color: 'primary'}} label='primary' />
          <Check value={{id: 2, color: 'secondary'}} label='secondary' />
          <Check value={{id: 3, color: 'info'}} label='info' />
        </CheckList>

        <pre>
          {JSON.stringify(this.state.valueObject,null,2)}
        </pre>

        <CheckList material label='Value field'  value={this.state.valueString} onValueChange={this.handleValueStringChange}>
          <Check value='primary' label='primary' />
          <Check value='secondary' label='secondary' />
          <Check value='info' label='info' />
        </CheckList>

        <pre>
          {JSON.stringify(this.state.valueString,null,2)}
        </pre>
        
        <CheckList material label='Value field' value={this.state.valueNumber} onValueChange={this.handleValueNumberChange}>
          <Check value={1} label='1' />
          <Check value={2} label='2' />
          <Check value={3} label='3' />
        </CheckList>

        <pre>
          {JSON.stringify(this.state.valueNumber,null,2)}
        </pre>
      </div>
    );
  }
}

Custom Items

Preview
Code

Custom Check boxes



Check Box 1

Check Box 2

Check Box 3

Check Box 4

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateType = {
  values: Array<string>;
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      values: ['primary'],
    }
    
    this.handleValueChange = this.handleValueChange.bind(this);
  }

  public handleValueChange(selectedItems: string | Array<string>) {
    this.setState({values: selectedItems as Array<string>});
  }

  public render() {
    return (
      <div className='example-block'>
        <CheckList material label='Custom Check boxes' value={this.state.values} onValueChange={this.handleValueChange}>
          <Check value='primary' size='small' color='primary' label='Check Box 1' />
          <Check value='info' size='default' color='info' label='Check Box 2' />
          <Check value='warning' size='medium' color='warning' label='Check Box 3' />
          <Check value='error' size='large' color='error' label='Check Box 4' />
        </CheckList>
      </div>
    );
  }
}

Value Field

Preview
Code

Value Field



primary

secondary

info

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type ItemProps = { id: number, color: string; };

type StateType = {
  valueObject: Array<ItemProps>,
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      valueObject: [{id: 1, color: 'primary'}]
    }
    
    this.handleValueChange = this.handleValueChange.bind(this);
  }

  public handleValueChange(selectedItems: Array<ItemProps>) {
    this.setState({valueObject: selectedItems});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <CheckList material label='Value Field' valueField={'id'} value={this.state.valueObject} onValueChange={this.handleValueChange}>
          <Check value={{id: 1, color: 'primary'}} label='primary' />
          <Check value={{id: 2, color: 'secondary'}} label='secondary' />
          <Check value={{id: 3, color: 'info'}} label='info' />
        </CheckList>
      </div>
    );
  }
}

Multi Select

Preview
Code

Multi Select (default)



primary

secondary

info

[
  {
    "id": 1,
    "color": "primary"
  }
]

Single Select



primary

secondary

info

{
  "id": 1,
  "color": "primary"
}

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type ItemProps = { id: number, color: string; };

type StateType = {
  singleSelect: ItemProps,
  multipleSelect: Array<ItemProps>;
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      singleSelect: {id: 1, color: 'primary'},
      multipleSelect: [{id: 1, color: 'primary'}]
    }
    
    this.handleSingleSelect = this.handleSingleSelect.bind(this);
    this.handleMultipleSelect = this.handleMultipleSelect.bind(this);
  }

  public handleSingleSelect(selectedItem: ItemProps) {
    this.setState({singleSelect: selectedItem});
  }

  public handleMultipleSelect(selectedItems: Array<ItemProps>) {
    this.setState({multipleSelect: selectedItems});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <CheckList material multipleSelect={true} label='Multi Select (default)' valueField={'id'} value={this.state.multipleSelect} onValueChange={this.handleMultipleSelect}>
          <Check value={{id: 1, color: 'primary'}} label='primary' />
          <Check value={{id: 2, color: 'secondary'}} label='secondary' />
          <Check value={{id: 3, color: 'info'}} label='info' />
        </CheckList>

        <pre>
          {JSON.stringify(this.state.multipleSelect, null, 2)}
        </pre>

        <CheckList material multipleSelect={false} label='Single Select' valueField={'id'} value={this.state.singleSelect} onValueChange={this.handleSingleSelect}>
          <Check value={{id: 1, color: 'primary'}} label='primary' />
          <Check value={{id: 2, color: 'secondary'}} label='secondary' />
          <Check value={{id: 3, color: 'info'}} label='info' />
        </CheckList>

        <pre>
          {JSON.stringify(this.state.singleSelect, null, 2)}
        </pre>
      </div>
    );
  }
}

Type

Preview
Code

Type



Example 1

Example 2

Example 3

Type



Example 1

Example 2

Example 3

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateProp = {
  outlined: Array<string>;
  underlined: Array<string>;
}

export default class extends React.Component<{}, StateProp> {
  constructor(props: {}) {
    super(props);

    this.state = {
      outlined: ['example1'],
      underlined: ['example1']
    }
    
    this.handleOutlinedChange = this.handleOutlinedChange.bind(this);
    this.handleUnderlinedChange = this.handleUnderlinedChange.bind(this);
  }

  public handleOutlinedChange(selectedItems: Array<string>) {
    this.setState({outlined: selectedItems});
  }

  public handleUnderlinedChange(selectedItems: Array<string>) {
    this.setState({underlined: selectedItems});
  }

  public render() {
    return (
      <div className='example-block'>
        <CheckList material label='Type' type="outlined" value={this.state.outlined} onValueChange={this.handleOutlinedChange}>
          <Check value='example1' label='Example 1' />
          <Check value='example2' label='Example 2' />
          <Check value='example3' label='Example 3' />
        </CheckList>

        <CheckList material label='Type' type="underlined" value={this.state.underlined} onValueChange={this.handleUnderlinedChange}>
          <Check value='example1' label='Example 1' />
          <Check value='example2' label='Example 2' />
          <Check value='example3' label='Example 3' />
        </CheckList>
      </div>
    );
  }
}

Colors

Preview
Code

Color



default

Color



primary

Color

secondary

Color

light

Color



dark

Color



info

Color



success

Color



warning

Color



error

Color



crimson

Color



#ed143d

Color



primary

info

success

Color



rgb(237, 20, 61)

Color



rgba(237, 20, 61, 0.5)

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateProp = {
  default: Array<string>;
  primary: Array<string>;
  secondary: Array<string>;
  light: Array<string>;
  dark: Array<string>;
  info: Array<string>;
  success: Array<string>;
  warning: Array<string>;
  error: Array<string>;
  crimson: Array<string>;
  rgb: Array<string>;
  hex: Array<string>;
  rgba: Array<string>;
  custom: Array<string>;
}

export default class extends React.Component<{}, StateProp> {
  constructor(props: {}) {
    super(props);

    this.state = {
      default: ['default'],
      primary: ['primary'],
      secondary: ['secondary'],
      light: ['light'],
      dark: ['dark'],
      info: ['info'],
      success: ['success'],
      warning: ['warning'],
      error: ['error'],
      crimson: ['crimson'],
      rgb: ['rgb'],
      hex: ['hex'],
      rgba: ['rgba'],
      custom: ['custom']
    }
    
    this.handleDefaultChange = this.handleDefaultChange.bind(this);
    this.handlePrimaryChange = this.handlePrimaryChange.bind(this);
    this.handleSecondaryChange = this.handleSecondaryChange.bind(this);
    this.handelLightChange = this.handelLightChange.bind(this);
    this.handleInfoChange = this.handleInfoChange.bind(this);
    this.handleSuccessChange = this.handleSuccessChange.bind(this);
    this.handleWarningChange = this.handleWarningChange.bind(this);
    this.handleErrorChange = this.handleErrorChange.bind(this);
    this.handleCrimsonChange = this.handleCrimsonChange.bind(this);
    this.handleRgbChange = this.handleRgbChange.bind(this);
    this.handleRgbaChange = this.handleRgbaChange.bind(this);
    this.handleHexChange = this.handleHexChange.bind(this);
    this.handleCustomChange = this.handleCustomChange.bind(this);
    this.handleDarkChange = this.handleDarkChange.bind(this);
  }

  public handleDefaultChange(selectedItems: Array<string>): void {
    this.setState({default: selectedItems});
  }

  public handlePrimaryChange(selectedItems: Array<string>) {
    this.setState({primary: selectedItems});
  }

  public handleSecondaryChange(selectedItems: Array<string>) {
    this.setState({secondary: selectedItems});
  }

  public handelLightChange(selectedItems: Array<string>) {
    this.setState({light: selectedItems});
  }

  public handleDarkChange(selectedItems: Array<string>) {
    this.setState({dark: selectedItems});
  }

  public handleInfoChange(selectedItems: Array<string>) {
    this.setState({info: selectedItems});
  }

  public handleSuccessChange(selectedItems: Array<string>) {
    this.setState({success: selectedItems});
  }

  public handleWarningChange(selectedItems: Array<string>) {
    this.setState({warning: selectedItems});
  }

  public handleErrorChange(selectedItems: Array<string>) {
    this.setState({error: selectedItems});
  }

  public handleCrimsonChange(selectedItems: Array<string>) {
    this.setState({crimson: selectedItems});
  }

  public handleRgbChange(selectedItems: Array<string>) {
    this.setState({rgb: selectedItems});
  }

  public handleRgbaChange(selectedItems: Array<string>) {
    this.setState({rgba: selectedItems});
  }

  public handleHexChange(selectedItems: Array<string>) {
    this.setState({hex: selectedItems});
  }

  public handleCustomChange(selectedItems: Array<string>) {
    this.setState({custom: selectedItems});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <div className='demo-row'>
          <CheckList material label='Color' color="default" value={this.state.default} onValueChange={this.handleDefaultChange}>
            <Check value='default' label='default' />
            <Check value='default1' label='default' />
            <Check value='default2' label='default' />
          </CheckList>

          <CheckList material label='Color' color="primary" value={this.state.primary} onValueChange={this.handlePrimaryChange}>
            <Check value='primary' label='primary' />
            <Check value='primary1' label='primary' />
            <Check value='primary2' label='primary' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Color' color="secondary" value={this.state.default} onValueChange={this.handleSecondaryChange}>
            <Check value='secondary' label='secondary' />
            <Check value='secondary1' label='secondary' />
            <Check value='secondary2' label='secondary' />
          </CheckList>

          <CheckList material label='Color' color="light" value={this.state.default} onValueChange={this.handelLightChange}>
            <Check value='light' label='light' />
            <Check value='light1' label='light' />
            <Check value='light2' label='light' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Color' color='dark' value={this.state.dark} onValueChange={this.handleDarkChange}>
            <Check value='dark' label='dark' />
            <Check value='dark1' label='dark' />
            <Check value='dark2' label='dark' />
          </CheckList>
          
          <CheckList material label='Color' color='info' value={this.state.info} onValueChange={this.handleInfoChange}>
            <Check value='info' label='info' />
            <Check value='info1' label='info' />
            <Check value='info2' label='info' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Color' color="success" value={this.state.success} onValueChange={this.handleSuccessChange}>
            <Check value='success' label='success' />
            <Check value='success1' label='success' />
            <Check value='success2' label='success' />
          </CheckList>
          
          <CheckList material label='Color' color="warning" value={this.state.warning} onValueChange={this.handleWarningChange}>
            <Check value='warning' label='warning' />
            <Check value='warning1' label='warning' />
            <Check value='warning2' label='warning' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Color' color="error" value={this.state.error} onValueChange={this.handleErrorChange}>
            <Check value='error' label='error' />
            <Check value='error1' label='error' />
            <Check value='error2' label='error' />
          </CheckList>
          
          <CheckList material label='Color' color="crimson" value={this.state.crimson} onValueChange={this.handleCrimsonChange}>
            <Check value='crimson' label='crimson' />
            <Check value='crimson1' label='crimson' />
            <Check value='crimson2' label='crimson' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Color' color="#ed143d" value={this.state.hex} onValueChange={this.handleHexChange}>
            <Check value='hex' label='#ed143d' />
            <Check value='hex1' label='#ed143d' />
            <Check value='hex2' label='#ed143d' />
          </CheckList>

          <CheckList material label='Color' color="rgba(237, 20, 61, 0.5)" value={this.state.custom} onValueChange={this.handleCustomChange}>
            <Check value='custom' label='primary' color='primary' />
            <Check value='custom1' label='info' color='info' />
            <Check value='custom2' label='success' color='success' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Color' color="rgb(237, 20, 61)" value={this.state.rgb} onValueChange={this.handleRgbChange}>
            <Check value='rgb' label='rgb(237, 20, 61)' />
            <Check value='rgb1' label='rgb(237, 20, 61)' />
            <Check value='rgb2' label='rgb(237, 20, 61)' />
          </CheckList>
          
          <CheckList material label='Color' color="rgba(237, 20, 61, 0.5)" value={this.state.rgba} onValueChange={this.handleRgbaChange}>
            <Check value='rgba' label='rgba(237, 20, 61, 0.5)' />
            <Check value='rgba1' label='rgba(237, 20, 61, 0.5)' />
            <Check value='rgba2' label='rgba(237, 20, 61, 0.5)' />
          </CheckList>
        </div>
      </div>
    );
  }
}

Sizes

Preview
Code

Sizes



default

Sizes



small

Sizes



medium

Sizes



large

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateProp = {
  default: Array<string>;
  small: Array<string>;
  medium: Array<string>;
  large: Array<string>;
}

export default class extends React.Component<{}, StateProp> {
  constructor(props: {}) {
    super(props);

    this.state = {
      default: ['default'],
      small: ['small'],
      medium: ['medium'],
      large: ['large']
    }
    
    this.handleDefaultChange = this.handleDefaultChange.bind(this);
    this.handleSmallChange = this.handleSmallChange.bind(this);
    this.handleMediumChange = this.handleMediumChange.bind(this);
    this.handelLargeChange = this.handelLargeChange.bind(this);
  }

  public handleDefaultChange(selectedItems: Array<string>): void {
    this.setState({default: selectedItems});
  }

  public handleSmallChange(selectedItems: Array<string>) {
    this.setState({small: selectedItems});
  }

  public handleMediumChange(selectedItems: Array<string>) {
    this.setState({medium: selectedItems});
  }

  public handelLargeChange(selectedItems: Array<string>) {
    this.setState({large: selectedItems});
  }

  public render() {
    return (
      <div className='example-block demo-column'>

        <div className='demo-row'>
          <CheckList material label='Sizes' size="default" value={this.state.default} onValueChange={this.handleDefaultChange}>
            <Check value='default' label='default' />
            <Check value='default1' label='default' />
            <Check value='default2' label='default' />
          </CheckList>

          <CheckList material label='Sizes' size="small" value={this.state.small} onValueChange={this.handleSmallChange}>
            <Check value='small' label='small' />
            <Check value='small1' label='small' />
            <Check value='small2' label='small' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Sizes' size="medium" value={this.state.medium} onValueChange={this.handleMediumChange}>
            <Check value='medium' label='medium' />
            <Check value='medium1' label='medium' />
            <Check value='medium2' label='medium' />
          </CheckList>

          <CheckList material label='Sizes' size="large" value={this.state.large} onValueChange={this.handelLargeChange}>
            <Check value='large' label='large' />
            <Check value='large1' label='large' />
            <Check value='large2' label='large' />
          </CheckList>
        </div>
      </div>
    );
  }
}

Disabled

Preview
Code

Disabled



import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateType = {
  valueNumber: Array<number>,
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      valueNumber: [1, 3],
    }
    
    this.handleChange = this.handleChange.bind(this);
  }

  public handleChange(value: Array<number>) {
    this.setState({valueNumber: value as Array<number>});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <CheckList material label='Disabled' disabled value={this.state.valueNumber} onValueChange={this.handleChange}>
          <Check value={1} label='1' />
          <Check value={2} label='2' />
          <Check value={3} label='3' />
        </CheckList>
      </div>
    );
  }
}

Direction

Preview
Code

Direction Row



Row 1

Row 2



Row 3

Direction Column



Column 1

Column 2



Column 3

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateType = {
  rowValues: Array<number>;
  columnValues: Array<number>;
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      columnValues: [1, 3],
      rowValues: [1, 3],
    }
    
    this.handleRowChange = this.handleRowChange.bind(this);
    this.handleColumnChange = this.handleColumnChange.bind(this);
  }

  public handleRowChange(value: Array<number>) {
    this.setState({rowValues: value as Array<number>});
  }

  public handleColumnChange(value: Array<number>) {
    this.setState({columnValues: value as Array<number>});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
         <CheckList material label='Direction Row' direction="row" value={this.state.rowValues} onValueChange={this.handleRowChange}>
          <Check value={1} label='Row 1' />
          <Check value={2} label='Row 2' />
          <Check value={3} label='Row 3' />
        </CheckList>

        <CheckList material label='Direction Column' direction="column" value={this.state.columnValues} onValueChange={this.handleColumnChange}>
          <Check value={1} label='Column 1' />
          <Check value={2} label='Column 2' />
          <Check value={3} label='Column 3' />
        </CheckList>
      </div>
    );
  }
}

Border Colors

Preview
Code

crimson



crimson

blue

red

#ed143d



#ed143d

#ce04d1

#343deb

rgba(237, 20, 61, 0.5)



rgba(237, 20, 61, 0.5)

rgba(191, 112, 204, 0.5)

rgba(40, 61, 158, 0.5)

rgb(237, 20, 61)



rgb(237, 20, 61)

rgb(191, 112, 204)

rgb(40, 61, 158)

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateType = {
  nameValues: Array<string>,
  rgbValues: Array<string>,
  hexValues: Array<string>,
  rgbaValues: Array<string>,
}


export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      nameValues: ['crimson'],
      rgbValues: ['rgb(237, 20, 61)'],
      hexValues: ['#ed143d'],
      rgbaValues: ['rgba(237, 20, 61, 0.5)'],
    }
    
    this.handleNameValueChange = this.handleNameValueChange.bind(this);
    this.handleRgbValueChange = this.handleRgbValueChange.bind(this);
    this.handleHexValueChange = this.handleHexValueChange.bind(this);
    this.handleRgbaValueChange = this.handleRgbaValueChange.bind(this);
  }

  public handleNameValueChange(value: Array<string>) {
    this.setState({nameValues: value as Array<string>});
  }

  public handleRgbValueChange(value: Array<string>) {
    this.setState({rgbValues: value as Array<string>});
  }

  public handleHexValueChange(value: Array<string>) {
    this.setState({hexValues: value as Array<string>});
  }

  public handleRgbaValueChange(value: Array<string>) {
    this.setState({rgbaValues: value as Array<string>});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <div className='demo-row'>
          <CheckList material label='crimson' borderColor="crimson" value={this.state.nameValues} onValueChange={this.handleNameValueChange}>
            <Check value='crimson' label='crimson' />
            <Check value='blue' label='blue' />
            <Check value='red' label='red' />
          </CheckList>
					
          <CheckList material label='#ed143d' borderColor="#ed143d" value={this.state.hexValues} onValueChange={this.handleHexValueChange}>
            <Check value='#ed143d' label='#ed143d' />
            <Check value='#ce04d1' label='#ce04d1' />
            <Check value='#343deb' label='#343deb' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='rgba(237, 20, 61, 0.5)' borderColor="rgba(237, 20, 61, 0.5)" value={this.state.rgbaValues} onValueChange={this.handleRgbaValueChange}>
            <Check value='rgba(237, 20, 61, 0.5)' label='rgba(237, 20, 61, 0.5)' />
            <Check value='rgba(191, 112, 204, 0.5)' label='rgba(191, 112, 204, 0.5)' />
            <Check value='rgba(40, 61, 158, 0.5)' label='rgba(40, 61, 158, 0.5)' />
          </CheckList>

          <CheckList material label='rgb(237, 20, 61)' borderColor="rgb(237, 20, 61)" value={this.state.rgbValues} onValueChange={this.handleRgbValueChange}>
            <Check value='rgb(237, 20, 61)' label='rgb(237, 20, 61)' />
            <Check value='rgb(191, 112, 204)' label='rgb(191, 112, 204)' />
            <Check value='rgb(40, 61, 158)' label='rgb(40, 61, 158)' />
          </CheckList>
        </div>
      </div>
    );
  }
}

Border Width

Preview
Code

Border Width



none

Border Width



hairline

Border Width



thin

Border Width



base

Border Width



thick

Border Width



import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateType = {
  none: Array<string>,
  hairline: Array<string>,
  base: Array<string>,
  thin: Array<string>,
  thick: Array<string>,
  number: Array<string>,
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      none: ['none'],
      hairline: ['hairline'],
      base: ['base'],
      thin: ['thin'],
      thick: ['thick'],
      number: ['number'],
    }
    
    this.handleChangeNone = this.handleChangeNone.bind(this);
    this.handleChangeHairline = this.handleChangeHairline.bind(this);
    this.handleChangeBase = this.handleChangeBase.bind(this);
    this.handleChangeThin = this.handleChangeThin.bind(this);
    this.handleChangeThick = this.handleChangeThick.bind(this);
    this.handleChangeNumber = this.handleChangeNumber.bind(this);
  }

  public handleChangeNone(selectedItems: Array<string>) {
    this.setState({none: selectedItems});
  }

  public handleChangeHairline(selectedItems: Array<string>) {
    this.setState({hairline: selectedItems});
  }

  public handleChangeBase(selectedItems: Array<string>) {
    this.setState({base: selectedItems});
  }

  public handleChangeThin(selectedItems: Array<string>) {
    this.setState({thin: selectedItems});
  }

  public handleChangeThick(selectedItems: Array<string>) {
    this.setState({thick: selectedItems});
  }

  public handleChangeNumber(selectedItems: Array<string>) {
    this.setState({number: selectedItems});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <div className='demo-row'>
          <CheckList material label='Border Width' borderWidth="none" value={this.state.none} onValueChange={this.handleChangeNone}>
            <Check value='none' label='none' />
            <Check value='none1' label='none' />
            <Check value='none2' label='none' />
          </CheckList>
          
          <CheckList material label='Border Width' borderWidth="hairline" value={this.state.hairline} onValueChange={this.handleChangeHairline}>
            <Check value='hairline' label='hairline' />
            <Check value='hairline1' label='hairline' />
            <Check value='hairline2' label='hairline' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Border Width' borderWidth="thin" value={this.state.thin} onValueChange={this.handleChangeThin}>
            <Check value='thin' label='thin' />
            <Check value='thin1' label='thin' />
            <Check value='thin2' label='thin' />
          </CheckList>
          
          <CheckList material label='Border Width' borderWidth="base" value={this.state.base} onValueChange={this.handleChangeBase}>
            <Check value='base' label='base' />
            <Check value='base1' label='base' />
            <Check value='base2' label='base' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='Border Width' borderWidth="thick" value={this.state.thick} onValueChange={this.handleChangeThick}>
            <Check value='thick' label='thick' />
            <Check value='thick1' label='thick' />
            <Check value='thick2' label='thick' />
          </CheckList>
          
          <CheckList material label='Border Width' borderWidth={3} value={this.state.number} onValueChange={this.handleChangeNumber}>
            <Check value='number' label='3' />
            <Check value='number1' label='3' />
            <Check value='number2' label='3' />
          </CheckList>
        </div>
      </div>
    );
  }
}

Background Colors

Preview
Code

crimson



crimson

blue

red

#ed143d



#ed143d

#ce04d1

#343deb

rgb(237, 20, 61)



rgb(237, 20, 61)

rgb(191, 112, 204)

rgb(40, 61, 158)

rgba(237, 20, 61, 0.5)



rgba(237, 20, 61, 0.5)

rgba(191, 112, 204, 0.5)

rgba(40, 61, 158, 0.5)

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";


type StateType = {
  nameValues: Array<string>,
  rgbValues: Array<string>,
  hexValues: Array<string>,
  rgbaValues: Array<string>,
}


export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      nameValues: ['crimson'],
      rgbValues: ['rgb(237, 20, 61)'],
      hexValues: ['#ed143d'],
      rgbaValues: ['rgba(237, 20, 61, 0.5)'],
    }
    
    this.handleNameValueChange = this.handleNameValueChange.bind(this);
    this.handleRgbValueChange = this.handleRgbValueChange.bind(this);
    this.handleHexValueChange = this.handleHexValueChange.bind(this);
    this.handleRgbaValueChange = this.handleRgbaValueChange.bind(this);
  }

  public handleNameValueChange(value: Array<string>) {
    this.setState({nameValues: value as Array<string>});
  }

  public handleRgbValueChange(value: Array<string>) {
    this.setState({rgbValues: value as Array<string>});
  }

  public handleHexValueChange(value: Array<string>) {
    this.setState({hexValues: value as Array<string>});
  }

  public handleRgbaValueChange(value: Array<string>) {
    this.setState({rgbaValues: value as Array<string>});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <div className='demo-row'>
          <CheckList material label='crimson' backgroundColor="crimson" value={this.state.nameValues} onValueChange={this.handleNameValueChange}>
            <Check value='crimson' label='crimson' />
            <Check value='blue' label='blue' />
            <Check value='red' label='red' />
          </CheckList>
          
          <CheckList material label='#ed143d' backgroundColor="#ed143d" value={this.state.hexValues} onValueChange={this.handleHexValueChange}>
            <Check value='#ed143d' label='#ed143d' />
            <Check value='#ce04d1' label='#ce04d1' />
            <Check value='#343deb' label='#343deb' />
          </CheckList>
        </div>

        <div className='demo-row'>
          <CheckList material label='rgb(237, 20, 61)' backgroundColor="rgb(237, 20, 61)" value={this.state.rgbValues} onValueChange={this.handleRgbValueChange}>
            <Check value='rgb(237, 20, 61)' label='rgb(237, 20, 61)' />
            <Check value='rgb(191, 112, 204)' label='rgb(191, 112, 204)' />
            <Check value='rgb(40, 61, 158)' label='rgb(40, 61, 158)' />
          </CheckList>

          <CheckList material label='rgba(237, 20, 61, 0.5)' backgroundColor="rgba(237, 20, 61, 0.5)" value={this.state.rgbaValues} onValueChange={this.handleRgbaValueChange}>
            <Check value='rgba(237, 20, 61, 0.5)' label='rgba(237, 20, 61, 0.5)' />
            <Check value='rgba(191, 112, 204, 0.5)' label='rgba(191, 112, 204, 0.5)' />
            <Check value='rgba(40, 61, 158, 0.5)' label='rgba(40, 61, 158, 0.5)' />
          </CheckList>
        </div>
      </div>
    );
  }
}

Text Helper

Preview
Code

Helper Text



Check 1

Check 2



Check 3

Example with helper text

import React from "react";
import { Check, CheckList } from "@flexnative/inputs";

type StateType = {
  valueNumber: Array<number>,
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      valueNumber: [1, 3],
    }
    
    this.handleChange = this.handleChange.bind(this);
  }

  public handleChange(value: Array<number>) {
    this.setState({valueNumber: value as Array<number>});
  }

  public render() {
    return (
      <div className='example-div demo-column'>
        <CheckList material label='Helper Text' helperText="Example with helper text" value={this.state.valueNumber} onValueChange={this.handleChange}>
          <Check value={1} label='Check 1' />
          <Check value={2} label='Check 2' />
          <Check value={3} label='Check 3' />
        </CheckList>
      </div>
    );
  }
}

Label

Preview
Code

Label as text



Check 1

Check 2

Check 3

 Custom Element



Check 1

Check 2

Check 3

import React from "react";
import { Alert, Platform, StyleSheet, Text } from "react-native";
import Icon from "@flexnative/icons";
import { Check, CheckList } from "@flexnative/inputs";


type StateType = {
  textValues: Array<string>;
  customValues: Array<string>;
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      textValues: ['1'],
      customValues: ['1']
    }
    
    this.handleTextValues = this.handleTextValues.bind(this);
    this.handleCustomValues = this.handleCustomValues.bind(this);
  }

  public handleTextValues(selectedItem: Array<string>) {
    this.setState({textValues: selectedItem});
  }

  public handleCustomValues(selectedItems: Array<string>) {
    this.setState({customValues: selectedItems});
  }

  public render() {
    return (
      <div className='example-div demo-row'>
        <CheckList material label='Label as text' value={this.state.textValues} onValueChange={this.handleTextValues}>
          <Check value='1' label='Check 1' />
          <Check value='2' label='Check 2' />
          <Check value='3' label='Check 3' />
        </CheckList>

        <CheckList material label={<Label />} value={this.state.customValues} onValueChange={this.handleCustomValues}>
          <Check value='1' label='Check 1' />
          <Check value='2' label='Check 2' />
          <Check value='3' label='Check 3' />
        </CheckList>
      </div>
    );
  }
}

function Label() {
  const openAlert = () =>
    Platform.OS === 'web'
      ? alert('Custom Element as label')
      : Alert.alert('Alert Title', 'Custom Element as label', [
          {text: 'OK'},
        ]);
    
  return (
    <Text style={styles.label}>
      <Icon name="avatar" color='crimson' onPress={openAlert} /> Custom Element
    </Text>
  );
}

const styles = StyleSheet.create({
  label: {
    color: 'crimson',
    columnGap: 26,
  }
});

Label Style

Preview
Code

Custom Label Style



Check 1

Check 2

Check 3

import React from "react";
import { Alert, Platform, StyleSheet, Text } from "react-native";
import Icon from "@flexnative/icons";
import { Check, CheckList } from "@flexnative/inputs";


type StateType = {
  testValues: Array<string>;
}

export default class extends React.Component<{}, StateType> {
  constructor(props: {}) {
    super(props);

    this.state = {
      testValues: ['1']
    }
    
    this.handleValuesChange = this.handleValuesChange.bind(this);
  }

  public handleValuesChange(selectedItem: Array<string>) {
    this.setState({testValues: selectedItem});
  }

  public render() {
    return (
      <div className='example-div'>
        <CheckList material label='Custom Label Style'
                  labelStyle={styles.label}
                  value={this.state.testValues}
                  onValueChange={this.handleValuesChange}>
          <Check value='1' label='Check 1' />
          <Check value='2' label='Check 2' />
          <Check value='3' label='Check 3' />
        </CheckList>
      </div>
    );
  }
}

function Label() {
  const openAlert = () =>
    Platform.OS === 'web'
      ? alert('Custom Element as label')
      : Alert.alert('Alert Title', 'Custom Element as label', [
          {text: 'OK'},
        ]);
    
  return (
    <Text style={styles.label}>
      <Icon name="avatar" color='crimson' onPress={openAlert} /> Custom Element
    </Text>
  );
}

const styles = StyleSheet.create({
  label: {
    color: 'crimson',
    columnGap: 26,
  }
});

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='#ebedf0'
              borderColor='crimson'
              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

Usecase Examples​

Value​

Custom Items​

Value Field​

Multi Select​

Type​

Colors​

Sizes​

Disabled​

Direction​

Border Colors​

Border Width​

Background Colors​

Text Helper​

Label​

Label Style​

Playground​

Usecase Examples

Value

Custom Items

Value Field

Multi Select

Type

Colors

Sizes

Disabled

Direction

Border Colors

Border Width

Background Colors

Text Helper

Label

Label Style

Playground