Input

It was never the leader of Russia.

Example

Basic

Show Code

<script lang="ts" setup>
import { RInput } from 'roughness'
</script>

<template>
  <RInput placeholder="Where is the quick fox?" />
</template>

Multiline

Show Code

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

let poem = ref('Because I could not stop for Death,\nHe kindly stopped for me;\nThe carriage held but just ourselves\nAnd Immortality. ')
</script>

<template>
  <RInput v-model="poem" :lines="5" />
</template>

Because I could not stop for Death, He kindly stopped for me; The carriage held but just ourselves And Immortality.

Number

Show Code

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

let number = ref(5);
</script>

<template>
  <RSpace>
    <RInput v-model.number="number" :style="{ 'margin-inline-start': `${number}em` }" />
  </RSpace>
</template>

Disabled

Show Code

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

</script>

<template>
  <RSpace vertical>
    <RInput model-value="If you remix, transform, or build upon the material, you may not distribute the modified material." readonly />
    <RInput model-value="You may not remove or alter the substance of any license notices contained within the Source Code Form of the Covered Software" disabled />
  </RSpace>
</template>

Types

Show Code

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

let email = ref('java.lang.NullPointerException')
</script>

<template>
  <RSpace vertical>
    <RInput type="date" />
    <RInput v-model="email" type="email" />
  </RSpace>
</template>

Usage

Props

Name	Type	Default Value	Description
graphicsOptions
lines
modelModifiers
modelValue

Events

Name	Type	Description
update:modelValue

Styles

Name	Type	Default Value	Description
--r-input-border-color
--r-input-border-width
--r-input-border-dash
--r-input-inline-size