Check Box

The CheckBox is typically used to represent boolean values via a binary checked state.

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.

This code defines a generic React component called Check, which represents a checkbox element. Component extending React.PureComponent, which is optimized for performance by implementing a shallow prop and state comparison. The component accepts various props for customization, such as value, type, size, colors, and label. It handles changes via the handleChange method, which triggers an onValueChange callback when the checkbox is pressed. The component renders a Pressable element that toggles between checked and unchecked states, displaying appropriate check and label elements based on the current state.

API

import { Check, CheckProps } from '@flexnative/inputs';

Component

Check

Type: React.PureComponent<CheckProps<T>>

Properties

Name	Type	Required	Default Value	Description
value	`T`	false	`undefined`	Representing checkbox selected value.
type	`CheckType`	false	`inverse`	Check box fill mode. warning To have appearance for `'text'`, `'link'`, `'ghost'`, with custom color you should use hex colors.
size	`Sizes`	false	`normal`	Check Box size.
radius	`BorderRadius`	false	`medium`	Check Box border radius.
borderWidth	`BorderWidth`	false	`hairline`	Check Box borders width.
borderColor	`ColorValue`	false	`undefined`	Borders color according `react-native` ColorValue.
checkedBorderColor	`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.
checkedBackgroundColor	`ColorValue`	false	`undefined`	Background color for active state according `react-native` ColorValue.
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.
checkElement	`React.ReactElement`	false	`undefined`	Custom element to display on checked status.
unCheckElement	`React.ReactElement`	false	`undefined`	Custom element to display on unchecked status.
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.

CheckType

One of 'outlined' | 'solid' | 'inverse'

Name	Type	Description
outlined	`string`	Property to set checkbox with transparent background with borders.
solid	`string`	Property to fill in solid mode the background color of the checkbox component.
inverse	`string`	Property to set transparent background of the checkbox component and with solid background on check state.

InputColor

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.

CheckboxEvent<T>

Name	Type	Required	Default Value	Description
value	`T`	false	`undefined`	A value representing current checkbox value.
target	`any`	false	`undefined`	On native platforms, a `NodeHandle` for the element on which the event has occurred. On web, a DOM node on which the event has occurred.

Use case Examples

The following example demonstrates the FlexNative CheckBox in action.

Value

Preview
Code

Object value

String value

Boolean value

Object value: 

String value: 

Boolean value:

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:12:20
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:34:20
 * @ Description: Examples of Check component with different value types.
 */

import React from "react";

import { Check } from '@flexnative/inputs';


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

type StateType = {
  check1?: ValueType,
  check2?: string,
  check3?: boolean,
}

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

    this.state = {
      check1: undefined,
      check2: undefined,
      check3: undefined
    }
    
    this.handleChangeCheck1 = this.handleChangeCheck1.bind(this);
    this.handleChangeCheck2 = this.handleChangeCheck2.bind(this);
    this.handleChangeCheck3 = this.handleChangeCheck3.bind(this);
  }

  public handleChangeCheck1() {
    const val = this.state.check1;

    if(val)
      this.setState({check1: undefined});
    else
      this.setState({check1: {id: 1, color: 'red'}});
  }

  public handleChangeCheck2() {
    const val = this.state.check2;

    if(val)
      this.setState({check2: undefined});
    else
      this.setState({check2: 'blue'});
  }

  public handleChangeCheck3() {
    const val = !this.state.check3;
    this.setState({check3: val});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <div className='demo-row'>
          <Check value={this.state.check1} onValueChange={this.handleChangeCheck1} label='Object value' />
          <Check value={this.state.check2} onValueChange={this.handleChangeCheck2} label='String value' />
          <Check value={this.state.check3} onValueChange={this.handleChangeCheck3} label='Boolean value' />
        </div>

        <pre>
          <b>Object value: </b>{JSON.stringify(this.state.check1)}{'\n\n'}
          <b>String value: </b>{JSON.stringify(this.state.check2)}{'\n\n'}
          <b>Boolean value: </b>{JSON.stringify(this.state.check3)}
        </pre>
      </div>
    );
  }
}

Type

Preview
Code

outlined

solid

inverse

ghost

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:27:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:33:40
 * @ Description: Examples of Check component with different types.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false,
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} type='outlined' label='outlined' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} type='solid' label='solid' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} type='inverse' label='inverse' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} type='ghost' label='ghost' />
      </div>
    );
  }
}

Sizes

Preview
Code

small

solid

medium

large

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:31:47
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:33:21
 * @ Description: Examples of Check component with different sizes.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false,
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} size='small' label='small' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} size='default' label='solid' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} size='medium' label='medium' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} size='large' label='large' />
      </div>
    );
  }
}

Radius

Preview
Code

none

small

medium

large

full

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:35:08
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:32:18
 * @ Description: Examples of Check component with border radius.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false,
  false,
  false,
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} radius='none' label='none' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} radius='small' label='small' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} radius='medium' label='medium' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} radius='large' label='large' />
        <Check value={this.state.items![4]} onValueChange={() => this.handleChange(4)} radius='full' label='full' />
        <Check value={this.state.items![5]} onValueChange={() => this.handleChange(5)} radius={5} label='5' />
      </div>
    );
  }
}

Colors

Preview
Code

default

primary

secondary

light

dark

info

success

warning

error

crimson

#ed143d

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:37:38
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:26:38
 * @ Description: Examples of Check component with different colors.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} color='default' label='default' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} color='primary' label='primary' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} color='secondary' label='secondary' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} color='light' label='light' />
        <Check value={this.state.items![4]} onValueChange={() => this.handleChange(4)} color='dark' label='dark' />
        <Check value={this.state.items![5]} onValueChange={() => this.handleChange(5)} color='info' label='info' />
        <Check value={this.state.items![6]} onValueChange={() => this.handleChange(6)} color='success' label='success' />
        <Check value={this.state.items![7]} onValueChange={() => this.handleChange(7)} color='warning' label='warning' />
        <Check value={this.state.items![8]} onValueChange={() => this.handleChange(8)} color='error' label='error'/>
        <Check value={this.state.items![9]} onValueChange={() => this.handleChange(9)} color='crimson' label='crimson' />
        <Check value={this.state.items![10]} onValueChange={() => this.handleChange(10)} color='#ed143d' label='#ed143d'/>
        <Check value={this.state.items![11]} onValueChange={() => this.handleChange(11)} color='rgb(237, 20, 61)' label='rgb(237, 20, 61)' />
        <Check value={this.state.items![12]} onValueChange={() => this.handleChange(12)} color='rgba(237, 20, 61, 0.5)' label='rgba(237, 20, 61, 0.5)' />
      </div>
    );
  }
}

Border Width

Preview
Code

none (default)

hairline

thin

base

thick

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:40:39
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:24:55
 * @ Description: Examples of Check component with borders width.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false,
  false,
  false
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} type='outlined' borderWidth='none' label='none (default)' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} type='outlined' borderWidth='hairline' label='hairline' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} type='outlined' borderWidth='thin' label='thin' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} type='outlined' borderWidth='base' label='base' />
        <Check value={this.state.items![4]} onValueChange={() => this.handleChange(4)} type='outlined' borderWidth='thick' label='thick' />
        <Check value={this.state.items![5]} onValueChange={() => this.handleChange(5)} type='outlined' borderWidth={3} label='3' />
      </div>
    );
  }
}

Border Colors

Preview
Code

crimson

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

#ed143d

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:45:16
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:24:43
 * @ Description: Examples of Check component with borders color.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} type='outlined' borderColor='crimson' label='crimson' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} type='outlined' borderColor='rgb(237, 20, 61)' label='rgb(237, 20, 61)' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} type='outlined' borderColor='rgba(237, 20, 61, 0.5)' label='rgba(237, 20, 61, 0.5)' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} type='outlined' borderColor='#ed143d' label='#ed143d' />
      </div>
    );
  }
}

Checked Border Colors

Preview
Code

crimson

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

#ed143d

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:49:24
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:26:14
 * @ Description: Examples of Check component with borders color when it is in check state.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} type='outlined' checkedBorderColor='crimson' label='crimson' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} type='outlined' checkedBorderColor='rgb(237, 20, 61)' label='rgb(237, 20, 61)' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} type='outlined' checkedBorderColor='rgba(237, 20, 61, 0.5)' label='rgba(237, 20, 61, 0.5)' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} type='outlined' checkedBorderColor='#ed143d' label='#ed143d' />
      </div>
    );
  }
}

Disabled

Preview
Code



outlined



solid



inverse

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:52:35
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:27:17
 * @ Description: Examples of Check component in disabled state.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false,
  false,
  false
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={true} type='outlined' label='outlined' disabled />
        <Check value={false} type='outlined' label='outlined' disabled />
        
        <Check value={true} type='solid' label='solid' disabled />
        <Check value={false} type='solid' label='solid' disabled />

        <Check value={true} type='inverse' label='inverse' disabled />
        <Check value={false} type='inverse' label='inverse' disabled />
      </div>
    );
  }
}

Background Color

Preview
Code

crimson

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

#ed143d

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-12 23:58:42
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:24:34
 * @ Description: Examples of Check component with background color.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} backgroundColor='crimson' label='crimson' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} backgroundColor='rgb(237, 20, 61)' label='rgb(237, 20, 61)' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} backgroundColor='rgba(237, 20, 61, 0.5)' label='rgba(237, 20, 61, 0.5)' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} backgroundColor='#ed143d' label='#ed143d' />
      </div>
    );
  }
}

Checked Background Color

Preview
Code

crimson

rgb(237, 20, 61)

rgba(237, 20, 61, 0.5)

#ed143d

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-13 00:03:57
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:25:42
 * @ Description: Examples of Check component with background color when it is in check state.
 */

import React from "react";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} checkedBackgroundColor='crimson' label='crimson' />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} checkedBackgroundColor='rgb(237, 20, 61)' label='rgb(237, 20, 61)' />
        <Check value={this.state.items![2]} onValueChange={() => this.handleChange(2)} checkedBackgroundColor='rgba(237, 20, 61, 0.5)' label='rgba(237, 20, 61, 0.5)' />
        <Check value={this.state.items![3]} onValueChange={() => this.handleChange(3)} checkedBackgroundColor='#ed143d' label='#ed143d' />
      </div>
    );
  }
}

Label

Preview
Code

 Custom Element Label

labelStyles

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-13 00:08:46
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:29:06
 * @ Description: Examples of Check component with custom label element.
 */

import React from "react";
import { Alert, ColorValue, Platform, StyleProp, StyleSheet, Text, TextStyle } from "react-native";
import ExampleContainer from "./ExampleContainer";

import { Check, StateCallbackType } from '@flexnative/inputs';
import Icon from "@flexnative/icons";


const items: Array<boolean> = [
  false,
  false,
  false,
  false,
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]} onValueChange={() => this.handleChange(0)} label={<Label />} />
        <Check value={this.state.items![1]} onValueChange={() => this.handleChange(1)} label='labelStyles' labelStyle={labelStyles('rgb(35, 189, 224)', 'crimson')} />
      </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" style={{paddingLeft: 5}} onPress={openAlert} /> Custom Element Label
  </Text>;
}

const labelStyles = (defaultColor: ColorValue, activeColor: ColorValue) => {
  return (state: StateCallbackType): StyleProp<TextStyle> => {
    return [
      {
        color: state.focused ? activeColor : defaultColor
      }
    ]
  }
} 

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

Custom Check Element

Preview
Code

🤔

Custom Check Element

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-13 00:11:15
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:27:02
 * @ Description: Examples of Check component with custom element check.
 */

import React from "react";
import { StyleSheet, Text } from "react-native";
import ExampleContainer from "./ExampleContainer";

import { Check } from '@flexnative/inputs';


const items: Array<boolean> = [
  false,
  false,
  false,
  false,
];

export default class extends ExampleContainer {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: items
    }
  }

  public render() {
    return (
      <div className='example-block'>
        <Check value={this.state.items![0]}
              onValueChange={() => this.handleChange(0)}
              label='Custom Check Element'
              checkElement={<CheckElement />}
              unCheckElement={<UncheckElement />}
        />
      </div>
    );
  }
}

function CheckElement() {
  return <Text style={styles.label}>😍</Text>;
}
function UncheckElement() {
  return <Text style={styles.label}>🤔</Text>;
}

const styles = StyleSheet.create({
  label: {
    fontSize: 32
  },
});

Using as Radio Button

Preview
Code



Color red

Color blue

Color green

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

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-13 00:20:21
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:30:10
 * @ Description: Examples of Check component used as Radio Button.
 */

import React from "react";

import { Check } from '@flexnative/inputs';


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

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

    this.state = {
      value: { id: 1, color: 'red'}
    }
    
    this.handleChange = this.handleChange.bind(this);
  }

  public handleChange(value?: ValueType) {
    this.setState({value});
  }

  public render() {
    return (
      <div className='example-block demo-column'>
        <div className='demo-row'>
          <Check value={this.state.value?.id === 1} onValueChange={() => this.handleChange({id: 1, color: 'red'})} label='Color red' />
          <Check value={this.state.value?.id === 2} onValueChange={() => this.handleChange({id: 2, color: 'blue'})} label='Color blue' />
          <Check value={this.state.value?.id === 3} onValueChange={() => this.handleChange({id: 3, color: 'green'})} label='Color green' />
        </div>

        <pre>
          {JSON.stringify(this.state.value)}
        </pre>
      </div>
    );
  }
}

Playground

Live Editor

//Play with props to see live changes;

function CheckPlayground() {
  const [value, setValue] = useState(true);

  return (
    <Check value={value}
          label='Try check box'
          type='inverse'
          size='large'
          radius='large'
          color='primary'
          borderWidth='thick'
          onValueChange={() => setValue(!value)}
    />
  );
}

render(<CheckPlayground />);

Result

API​

Component​

Properties​

CheckType​

InputColor​

CheckboxEvent<T>​

Use case Examples​

Value​

Type​

Sizes​

Radius​

Colors​

Border Width​

Border Colors​

Checked Border Colors​

Disabled​

Background Color​

Checked Background Color​

Label​

Custom Check Element​

Using as Radio Button​

Playground​

API

Component

Properties

CheckType

InputColor

CheckboxEvent<T>

Use case Examples

Value

Type

Sizes

Radius

Colors

Border Width

Border Colors

Checked Border Colors

Disabled

Background Color

Checked Background Color

Label

Custom Check Element

Using as Radio Button

Playground