Form

Power takes many forms.

Example

Show Code

<script lang="ts" setup>
import { RCheckbox, RForm, RFormItem, RInput, RRate, RSelect, RSwitch, RText } from 'roughness'
import { ref } from 'vue'

let labelInline = ref(false)
</script>

<template>
  <RForm :label-inline="labelInline">
    <RFormItem name="label-inline">
      <RSwitch v-model="labelInline" />
    </RFormItem>
    <RFormItem name="label">
      <RInput v-model="label" />
    </RFormItem>
    <RFormItem name="required" :required="required">
      <RCheckbox v-model:checked="required" />
    </RFormItem>
    <RFormItem name="drink">
      <RSelect>
        <RCheckbox value="juice" />
        <RCheckbox value="milk" />
      </RSelect>
    </RFormItem>
    <RFormItem name="satisfaction">
      <RRate />
      <template #message>
        <RText type="comment" size="small">Please support us a lot!</RText>
      </template>
    </RFormItem>
  </RForm>
</template>

Label Inline

Label

Required

Drink

JuiceMilk

Satisfaction

Please support us a lot!

Usage

Props

Name	Type	Default Value	Description
labelInline

Slots

Name	Type	Description
default

FormItem Props

Name	Type	Default Value	Description
labelInline
name
required

FormItem Slots

Name	Type	Description
label
default
message

FormItem Styles

Name	Type	Default Value	Description
--r-form-item-label-inline-size
...			See Space Styles.