VaneUI

VaneUI

Basic Components

Checkbox

Allows users to select one or more options from a set. Checkboxes are ideal for binary choices and multiple selections within forms.

Basic Usage

Checkbox should be used inside a Label with matching id/htmlFor.

react-icon

BasicUsage.tsx

<Col>
  <Label htmlFor="terms">
    <Checkbox id="terms" />
    <span>
      I agree to the 
      <Link href="#">Terms of Service</Link>
       and 
      <Link href="#">Privacy Policy</Link>
      .
    </span>
  </Label>
  <Label htmlFor="emails">
    <Checkbox defaultChecked id="emails" />
    <Col noGap tag="span">
      <Text>Receive product updates</Text>
      <Text secondary xs>Occasional emails about new features</Text>
    </Col>
  </Label>
</Col>

Pre-checked Checkbox

Use defaultChecked on the input; wrap in Label for accessible click target.

react-icon

Pre-checkedCheckbox.tsx

<Col>
  <Label htmlFor="prechecked-1">
    <Checkbox defaultChecked id="prechecked-1" />
    Pre-checked checkbox
  </Label>
</Col>

Sizes

Checkboxes in different sizes - xs, sm, md, lg, xl, each wrapped in a Label. Use labels with same size as Checkboxes

react-icon

Sizes.tsx

<Row flexWrap>
  <Label htmlFor="size-xs" xs>
    <Checkbox defaultChecked id="size-xs" xs />
    Size: xs
  </Label>
  <Label htmlFor="size-sm" sm>
    <Checkbox defaultChecked id="size-sm" sm />
    Size: sm
  </Label>
  <Label htmlFor="size-md" md>
    <Checkbox defaultChecked id="size-md" md />
    Size: md
  </Label>
  <Label htmlFor="size-lg" lg>
    <Checkbox defaultChecked id="size-lg" lg />
    Size: lg
  </Label>
  <Label htmlFor="size-xl" xl>
    <Checkbox defaultChecked id="size-xl" xl />
    Size: xl
  </Label>
</Row>

Appearances

Different color appearances applied to the Checkbox; always place inside a Label.

react-icon

Appearances.tsx

<Row flexWrap>
  <Label htmlFor="appearance-primary" primary>
    <Checkbox defaultChecked id="appearance-primary" primary />
    Enable primary style
  </Label>
  <Label brand htmlFor="appearance-brand">
    <Checkbox brand defaultChecked id="appearance-brand" />
    Enable brand style
  </Label>
  <Label accent htmlFor="appearance-accent">
    <Checkbox accent defaultChecked id="appearance-accent" />
    Enable accent style
  </Label>
  <Label htmlFor="appearance-secondary" secondary>
    <Checkbox defaultChecked id="appearance-secondary" secondary />
    Enable secondary style
  </Label>
  <Label htmlFor="appearance-tertiary" tertiary>
    <Checkbox defaultChecked id="appearance-tertiary" tertiary />
    Enable tertiary style
  </Label>
  <Label htmlFor="appearance-success" success>
    <Checkbox defaultChecked id="appearance-success" success />
    Enable success style
  </Label>
  <Label danger htmlFor="appearance-danger">
    <Checkbox danger defaultChecked id="appearance-danger" />
    Enable danger style
  </Label>
  <Label htmlFor="appearance-warning" warning>
    <Checkbox defaultChecked id="appearance-warning" warning />
    Enable warning style
  </Label>
  <Label htmlFor="appearance-info" info>
    <Checkbox defaultChecked id="appearance-info" info />
    Enable info style
  </Label>
  <Label htmlFor="appearance-link" link>
    <Checkbox defaultChecked id="appearance-link" link />
    Enable link style
  </Label>
  <Label htmlFor="appearance-inherit" inherit>
    <Checkbox defaultChecked id="appearance-inherit" inherit />
    Enable inherit style
  </Label>
</Row>

Indeterminate State

Use the indeterminate prop for "select all" checkboxes that represent a partially selected group. The indeterminate state is visual only and does not affect the checked value.

react-icon
<Checkbox indeterminate />
react-icon

IndeterminateState.tsx

<Col>
  <Label htmlFor="select-all">
    <Checkbox id="select-all" indeterminate />
    Select all (2 of 4 selected)
  </Label>
  <Col
    style={{
      paddingLeft: 24
    }}
  >
    <Label htmlFor="ind-1">
      <Checkbox defaultChecked id="ind-1" />
       Item one
    </Label>
    <Label htmlFor="ind-2">
      <Checkbox defaultChecked id="ind-2" />
       Item two
    </Label>
    <Label htmlFor="ind-3">
      <Checkbox id="ind-3" />
       Item three
    </Label>
    <Label htmlFor="ind-4">
      <Checkbox id="ind-4" />
       Item four
    </Label>
  </Col>
</Col>

Checkbox Group

Multiple labeled checkboxes working together.

react-icon

CheckboxGroup.tsx

<Col>
  <Label htmlFor="opt-1">
    <Checkbox defaultChecked id="opt-1" />
    Email notifications
  </Label>
  <Label htmlFor="opt-2">
    <Checkbox id="opt-2" />
    SMS alerts
  </Label>
  <Label htmlFor="opt-3">
    <Checkbox id="opt-3" />
    Push notifications
  </Label>
</Col>

Checkbox Props

Size

Size props for controlling component dimensions

xs

Extra small size

sm

Small size

md

Medium size (default)

lg

Large size

xl

Extra large size

Hide

Hide props for responsive element visibility

mobileHide

Hide element on mobile devices and below (max-mobile: 48rem)

tabletHide

Hide element on tablet devices and below (max-tablet: 64rem)

desktopHide

Hide element on desktop devices and below (max-desktop: 80rem)

Items

Items props for controlling flex item alignment (align-items)

itemsStart

Align items to start (top/left)

itemsEnd

Align items to end (bottom/right)

itemsCenter

Align items to center

itemsBaseline

Align items to baseline

itemsStretch

Stretch items to fill container

Justify

Justify props for controlling flex content alignment (justify-content)

justifyStart

Pack items toward the start of the main axis

justifyEnd

Pack items toward the end of the main axis

justifyCenter

Center items along the main axis

justifyBetween

Distribute items with space between them

justifyAround

Distribute items with space around them

justifyEvenly

Distribute items with equal space around them

justifyStretch

Stretch items to fill the main axis

justifyBaseline

Align items along their baseline on main axis

Position

Position props for controlling CSS position property

relative

Relative positioning

absolute

Absolute positioning

fixed

Fixed positioning

sticky

Sticky positioning

static

Static positioning

Display

Display props for controlling CSS display property

inline

Inline display - flows with text

block

Block display - takes full width, new line

inlineBlock

Inline-block display - inline but with block properties

flex

Flex display - flexbox container

inlineFlex

Inline-flex display - inline flexbox container

grid

Grid display - CSS grid container

inlineGrid

Inline-grid display - inline grid container

contents

Contents display - element's box is removed, children display as if parent didn't exist

table

Table display - behaves like table element

tableCell

Table-cell display - behaves like td element

hidden

Hidden display - element is not visible

Overflow

Overflow props for controlling content overflow behavior

overflowAuto

Auto overflow - show scrollbars if needed

overflowHidden

Hidden overflow - clip content without scrollbars

overflowClip

Clip overflow - hard clip without scrollbars

overflowVisible

Visible overflow - content extends beyond bounds

overflowScroll

Scroll overflow - always show scrollbars

overflowXAuto

Auto overflow on X-axis only

overflowYAuto

Auto overflow on Y-axis only

overflowXHidden

Hidden overflow on X-axis only

overflowYHidden

Hidden overflow on Y-axis only

overflowXClip

Clip overflow on X-axis only

overflowYClip

Clip overflow on Y-axis only

overflowXVisible

Visible overflow on X-axis only

overflowYVisible

Visible overflow on Y-axis only

overflowXScroll

Scroll overflow on X-axis only

overflowYScroll

Scroll overflow on Y-axis only

Appearance

Appearance props for controlling component colors

primary

Primary color appearance (gray)

brand

Brand color appearance (blue)

accent

Accent color appearance (rose)

secondary

Secondary color appearance (gray)

tertiary

Tertiary color appearance

success

Success color appearance (green)

danger

Danger color appearance (red)

warning

Warning color appearance (amber)

info

Info color appearance (cyan)

link

Link color appearance (blue, for hyperlinks)

inherit

Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables

Border

Border props for controlling component borders

border

Enable border on all sides

borderT

Enable border on top

borderB

Enable border on bottom

borderL

Enable border on left

borderR

Enable border on right

borderX

Enable border on left and right

borderY

Enable border on top and bottom

noBorder

Disable all borders

Shadow

Shadow props for controlling drop shadows

shadow

Enable drop shadow

noShadow

Disable drop shadow

Ring

Ring props for controlling focus rings

ring

Enable focus ring

noRing

Disable focus ring

Focus Visible

Focus visible props for controlling focus-visible outlines

focusVisible

Enable focus-visible outline

noFocusVisible

Disable focus-visible outline

Shape

Shape props for controlling component border radius

pill

Fully rounded corners (circular)

sharp

No rounded corners (square)

rounded

Medium rounded corners (default)

Variant

Variant props for controlling component style variations

filled

Filled variant - solid background with contrasting text color

outline

Outline variant - transparent background with border and colored text (default)

Cursor

Cursor props for controlling cursor appearance

cursorPointer

Pointer cursor - indicates clickable element

cursorDefault

Default cursor - standard arrow

cursorNotAllowed

Not-allowed cursor - indicates disabled state

cursorNone

No cursor - hides the cursor

cursorText

Text cursor - indicates selectable text

cursorMove

Move cursor - indicates draggable element

cursorWait

Wait cursor - indicates loading/processing

Transition

Transition props for controlling animation effects

transition

Enable smooth transitions between states

noTransition

Disable transitions for instant state changes

Status

Status props for form validation state Note: For success/warning validation states, use the appearance props (success, warning) which provide similar visual feedback.

error

Show error state (red border/ring) for form validation

Width

Width props for controlling component width

wFull

Set width to 100%

wFit

Set width to fit-content

wAuto

Set width to auto

wScreen

Set width to 100vw (viewport width), removes max-width constraint

Height

Height props for controlling component height

hFit

Set height to fit-content

hFull

Set height to 100%

hAuto

Set height to auto

hScreen

Set height to 100vh (viewport height), removes max-height constraint

Transparent

Transparent prop for disabling background color

transparent

Disable background color - makes component background transparent

Responsive

Responsive prop for enabling breakpoint-specific sizing

responsive

Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap

Disabled

Disabled state for interactive components. Applies reduced opacity, not-allowed cursor, and disables pointer events.

disabled

Disable the component — reduces opacity, changes cursor to not-allowed, and prevents interaction

Controlled themes:

  • input.appearance
  • wrapper.appearance

    • On this page

    CheckboxBasic UsagePre-checked CheckboxSizesAppearancesIndeterminate StateCheckbox GroupCheckbox PropsSizeHideItemsJustifyPositionDisplayOverflowAppearanceBorderShadowRingFocus VisibleShapeVariantCursorTransitionStatusWidthHeightTransparentResponsiveDisabled