FinallyReact Design Library

Check

Please

The Check component can be used by importing { Check } from "finallyreact"

This component also has a Toggle version; simply set the toggle prop to true.

Example

Size

small

medium

large

Color

Use any FinallyReact color or valid hex value

blue-6

emerald-7

lava-6

#a26ade

Fill

blue-6

emerald-7

lava-6

Toggle

small

medium

large

#a26ade

Multi Check

First

only

Second

only

Disabled

[
  {
    "key": "first",
    "label": "First",
    "className": "mb-1/2",
    "defaultChecked": true,
    "showOnlySelect": true,
    "onlySelectText": "only"
  },
  {
    "key": "second",
    "label": "Second",
    "className": "mb-1/2",
    "showOnlySelect": true,
    "onlySelectText": "only"
  },
  {
    "key": "disabled",
    "label": "Disabled",
    "disabled": true,
    "showOnlySelect": false
  }
]

Disabled

Simple

Check Props

Prop Name	Prop Type	Description
checkColor	string	Color of Check icon
checked	boolean	Checked state of Check
color	string	Any FinallyReact color or hex value
defaultChecked	boolean	Default checked state of Check
disabled	boolean	Read only input
fill	boolean	Fill Check box with the specified color
inputProps	HTMLAttributes	Props for Check input (the check box)
label	string	Label for Check
labelProps	HTMLAttributes	Props for the label next to the Check
name	string	Optional identifier for Check
options	object	An array of checkbox items, each item has the same props as a single checkbox
options[].checked	boolean	Checked boolean for check item
options[].key	string	Key for check item
options[].label	string	Label for check item
options[].onlySelectProps	object	Additional props for the 'only' select
options[].onlySelectText	string	Text label for the 'only' select
options[].showOnlySelect	boolean	Show an 'only' text that selects this item and unselects others
simple	boolean	No fancy styles, but keep functionality
size	'sm' \| 'md' \| 'lg'	Size of Check
toggle	boolean	Toggle version of Check
toggleProps	HTMLAttributes	Props for Toggle version of Check

Check

Please

The Check component can be used by importing { Check } from "finallyreact"

This component also has a Toggle version; simply set the toggle prop to true.

Example

Size

small

medium

large

Color

Use any FinallyReact color or valid hex value

blue-6

emerald-7

lava-6

#a26ade

Fill

blue-6

emerald-7

lava-6

Toggle

small

medium

large

#a26ade

Multi Check

First

only

Second

only

Disabled

[
  {
    "key": "first",
    "label": "First",
    "className": "mb-1/2",
    "defaultChecked": true,
    "showOnlySelect": true,
    "onlySelectText": "only"
  },
  {
    "key": "second",
    "label": "Second",
    "className": "mb-1/2",
    "showOnlySelect": true,
    "onlySelectText": "only"
  },
  {
    "key": "disabled",
    "label": "Disabled",
    "disabled": true,
    "showOnlySelect": false
  }
]

Disabled

Simple

Check Props

Prop Name	Prop Type	Description
checkColor	string	Color of Check icon
checked	boolean	Checked state of Check
color	string	Any FinallyReact color or hex value
defaultChecked	boolean	Default checked state of Check
disabled	boolean	Read only input
fill	boolean	Fill Check box with the specified color
inputProps	HTMLAttributes	Props for Check input (the check box)
label	string	Label for Check
labelProps	HTMLAttributes	Props for the label next to the Check
name	string	Optional identifier for Check
options	object	An array of checkbox items, each item has the same props as a single checkbox
options[].checked	boolean	Checked boolean for check item
options[].key	string	Key for check item
options[].label	string	Label for check item
options[].onlySelectProps	object	Additional props for the 'only' select
options[].onlySelectText	string	Text label for the 'only' select
options[].showOnlySelect	boolean	Show an 'only' text that selects this item and unselects others
simple	boolean	No fancy styles, but keep functionality
size	'sm' \| 'md' \| 'lg'	Size of Check
toggle	boolean	Toggle version of Check
toggleProps	HTMLAttributes	Props for Toggle version of Check