Checkbox

Check-ch-check-check-check-ch-check it out. What-wha-what-what-what's it all about.

Example

Basic

Show Code

<script lang="ts" setup>
import { RCheckbox } from 'roughness'
import { ref } from 'vue'

const checked = ref(true)
</script>

<template>
  <RSpace vertical>
    <RCheckbox v-model:checked="checked">Are you OK, Indian MI fans?</RCheckbox>
    <RText>Oh {{ checked ? 'yes!' : 'no...' }}</RText>
  </RSpace>
</template>

Are you OK, Indian MI fans?Oh yes!

Group

Show Code

<script lang="ts" setup>
import { RCheckbox, RCheckboxGroup } from 'roughness'
import { ref } from 'vue'

const values = ref<string[]>([])
</script>

<template>
  <RSpace vertical>
    <RCheckboxGroup v-model="values" vertical>
      <RCheckbox value="Peggy" />
      <RCheckbox value="George" />
      <RCheckbox value="Mummy" />
      <RCheckbox value="Daddy" />
    </RCheckboxGroup>
    <RText>{{ values.length ? values.join(', ') : 'Nobody' }} {{ values.length > 1 ? 'are' : 'is' }} going hiking.</RText>
  </RSpace>
</template>

PeggyGeorgeMummyDaddy

Nobody is going hiking.

Radio

Show Code

<script lang="ts" setup>
import { RCheckbox, RCheckboxGroup } from 'roughness'
import { ref } from 'vue'

const value = ref<string | undefined>()
</script>

<template>
  <RSpace vertical>
    <RCheckboxGroup v-model="value" :multiple="false">
      <RCheckbox value="Peggy" />
      <RCheckbox value="George" />
      <RCheckbox value="Mummy" />
      <RCheckbox value="Daddy" />
    </RCheckboxGroup>
    <RText>{{ value ?? 'Nobody' }} is going hiking.</RText>
  </RSpace>
</template>

PeggyGeorgeMummyDaddy

Nobody is going hiking.

State

Show Code

<script lang="ts" setup>
import { RCheckbox, RSpace } from 'roughness'

</script>

<template>
  <RSpace vertical>
    <RCheckbox disabled>I can't move.</RCheckbox>
    <RCheckbox indeterminate>Maybe I should make a decision sooner.</RCheckbox>
    <RCheckboxGroup vertical disabled>
      <RCheckbox value="1984" />
      <RCheckbox value="Ugly Americans" />
    </RCheckboxGroup>
  </RSpace>
</template>

I can't move.Maybe I should make a decision sooner.

1984Ugly Americans

Tree

Show Code

<script lang="ts" setup>
import { RCheckbox, RCheckboxGroup } from 'roughness'
</script>

<template>
  <RSpace vertical>
    <RCheckboxGroup vertical :multiple="false">
      <RCheckbox value="Peggy's Family">
        <RSpace vertical>
          <RText>Peggy's Family</RText>
          <RCheckbox value="Peggy" />
          <RCheckbox value="George" />
          <RCheckbox value="Mummy" />
          <RCheckbox value="Daddy" />
        </RSpace>
      </RCheckbox>
      <RCheckbox value="Grandpa's Family">
        <RSpace vertical>
          <RText>Grandpa's Family</RText>
          <RCheckbox value="Grandpa" />
          <RCheckbox value="Granny" />
        </RSpace>
      </RCheckbox>
    </RCheckboxGroup>
  </RSpace>
</template>

Peggy's FamilyPeggyGeorgeMummyDaddy

Grandpa's FamilyGrandpaGranny

Usage

Props

Name	Type	Default Value	Description
checked
graphicsOptions
indeterminate
label
value
...			See Space Props. Unlike Space, the default value of Checkbox's tag is label.

Events

Name	Type	Description
update:checked

Slots

Name	Type	Description
default

Styles

Name	Type	Default Value	Description
--r-checkbox-border-color
--r-checkbox-border-width
--r-checkbox-checked-color
--r-checkbox-checked-width
--r-checkbox-control-size
...			See Space Styles.

CheckboxGroup Props

Name	Type	Default Value	Description
disabled
modelValue
multiple
...			See Space Props.

CheckboxGroup Events

Name	Type	Description
update:modelValue

CheckboxGroup Slots

Name	Type	Description
default

CheckboxGroup Styles

Name	Type	Default Value	Description
...			See Space Styles.