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.

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

Sizes

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

Name	Type	Value
small	`string`	Text size: FONT_SIZE.small CheckBox size: FONT_SIZE.small * 1.5
default	`string`	Fonts size: FONT_SIZE.default Icon size: FONT_SIZE.default * 1.5
medium	`string`	Fonts size: FONT_SIZE.medium Icon size: FONT_SIZE.medium * 1.5
large	`string`	Fonts size: FONT_SIZE.large Icon size: FONT_SIZE.large * 1.5

BorderRadius

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

BorderWidth

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

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

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.

Usecase 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​

Sizes​

BorderRadius​

BorderWidth​

InputColor​

CheckboxEvent<T>​

Usecase 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

Sizes

BorderRadius

BorderWidth

InputColor

CheckboxEvent<T>

Usecase 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