Select

We never choose anything at all. Things happen. Or not.

Example

Basic

Show Code

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

<template>
  <RSelect placeholder="Test engineer rank">
    <RCheckbox value="stable" />
    <RCheckbox value="beta" />
    <RCheckbox value="dev" />
    <RCheckbox value="canary" />
  </RSelect>
</template>

StableBetaDevCanary

Multiple

Show Code

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

<template>
  <RSelect multiple placeholder="Exodia">
    <RCheckbox value="Right Arm" />
    <RCheckbox value="Left Arm" />
    <RCheckbox value="Right Leg" />
    <RCheckbox value="Left Leg" />
  </RSelect>
</template>

Right ArmLeft ArmRight LegLeft Leg

State

Show Code

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

<template>
  <RSpace>
    <RSelect :model-value="[1]" multiple disabled>
      <RCheckbox :value="1" label="Basic User Info" />
    </RSelect>
    <RSelect loading placeholder="Arsenal" />
  </RSpace>
</template>

Basic User Info

Clearable

Show Code

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

<template>
  <RSelect clearable placeholder="Blue time">
    <RCheckbox value="Spring" />
    <RCheckbox value="Summer" />
    <RCheckbox value="Autumn" />
    <RCheckbox value="Winter" />
  </RSelect>
</template>

SpringSummerAutumnWinter

Tree

See Checkbox Tree.

Usage

Props

Name	Type	Default Value	Description
clearable
graphicsOptions
loading
modelValue

Events

Name	Type	Description
update:modelValue

Slots

Name	Type	Description
default

Styles

Name	Type	Default Value	Description
--r-select-border-color
--r-select-border-width
--r-select-border-dash
--r-select-dropdown-border-width
--r-select-dropdown-border-dash
--r-select-dropdown-padding-block
--r-select-dropdown-padding-inline