TextInput

example

code

import { TextInput } from 'charcell/react';

export function TextInputExample() {
  return (
    <TextInput placeholder="search highway 9" aria-label="search highway 9" />
  );
}

<script setup lang="ts">
import { TextInput } from 'charcell/vue';
</script>

<template>
  <TextInput placeholder="search highway 9" aria-label="search highway 9" />
</template>

<script lang="ts">
  import { TextInput } from 'charcell/svelte';
</script>

<TextInput placeholder="search highway 9" aria-label="search highway 9" />

<input
  class="CharcellTextInput CharcellTextInput--boxed"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

import { useState } from 'react';
import { TextInput } from 'charcell/react';

export function TextInputExample() {
  const [value, setValue] = useState('doreen schmorley');

  return (
    <TextInput
      value={value}
      onValueChange={setValue}
      placeholder="search highway 9"
      aria-label="search highway 9"
    />
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { TextInput } from 'charcell/vue';

const value = ref('doreen schmorley');
</script>

<template>
  <TextInput
    v-model="value"
    placeholder="search highway 9"
    aria-label="search highway 9"
  />
</template>

<script lang="ts">
  import { TextInput } from 'charcell/svelte';

  let value = $state('doreen schmorley');
</script>

<TextInput
  bind:value
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

<input
  class="CharcellTextInput CharcellTextInput--boxed"
  placeholder="search highway 9"
  aria-label="search highway 9"
  value="doreen schmorley"
/>

import { useState } from 'react';
import { TextInput } from 'charcell/react';

export function TextInputExample() {
  const [value, setValue] = useState('doreen schmorley');

  return (
    <TextInput
      value={value}
      onValueChange={setValue}
      placeholder="search highway 9"
      aria-label="search highway 9"
      disabled
    />
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { TextInput } from 'charcell/vue';

const value = ref('doreen schmorley');
</script>

<template>
  <TextInput
    v-model="value"
    placeholder="search highway 9"
    aria-label="search highway 9"
    disabled
  />
</template>

<script lang="ts">
  import { TextInput } from 'charcell/svelte';

  let value = $state('doreen schmorley');
</script>

<TextInput
  bind:value
  placeholder="search highway 9"
  aria-label="search highway 9"
  disabled
/>

<input
  class="CharcellTextInput CharcellTextInput--boxed"
  placeholder="search highway 9"
  aria-label="search highway 9"
  disabled
  value="doreen schmorley"
/>

import { TextInput } from 'charcell/react';

export function TextInputExample() {
  return (
    <TextInput
      variant="dense"
      placeholder="search highway 9"
      aria-label="search highway 9"
    />
  );
}

<script setup lang="ts">
import { TextInput } from 'charcell/vue';
</script>

<template>
  <TextInput
    variant="dense"
    placeholder="search highway 9"
    aria-label="search highway 9"
  />
</template>

<script lang="ts">
  import { TextInput } from 'charcell/svelte';
</script>

<TextInput
  variant="dense"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

<input
  class="CharcellTextInput CharcellTextInput--dense"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

import { TextInput } from 'charcell/react';

export function TextInputExample() {
  return (
    <TextInput
      border="none"
      placeholder="search highway 9"
      aria-label="search highway 9"
    />
  );
}

<script setup lang="ts">
import { TextInput } from 'charcell/vue';
</script>

<template>
  <TextInput
    border="none"
    placeholder="search highway 9"
    aria-label="search highway 9"
  />
</template>

<script lang="ts">
  import { TextInput } from 'charcell/svelte';
</script>

<TextInput
  border="none"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

<input
  class="CharcellTextInput CharcellTextInput--border-top-none CharcellTextInput--border-end-none CharcellTextInput--border-bottom-none CharcellTextInput--border-start-none CharcellTextInput--boxed"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

import { TextInput } from 'charcell/react';

export function TextInputExample() {
  return (
    <TextInput
      border="rounded"
      placeholder="search highway 9"
      aria-label="search highway 9"
    />
  );
}

<script setup lang="ts">
import { TextInput } from 'charcell/vue';
</script>

<template>
  <TextInput
    border="rounded"
    placeholder="search highway 9"
    aria-label="search highway 9"
  />
</template>

<script lang="ts">
  import { TextInput } from 'charcell/svelte';
</script>

<TextInput
  border="rounded"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

<input
  class="CharcellTextInput CharcellTextInput--border-top-rounded CharcellTextInput--border-end-rounded CharcellTextInput--border-bottom-rounded CharcellTextInput--border-start-rounded CharcellTextInput--boxed"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

import { TextInput } from 'charcell/react';

export function TextInputExample() {
  return (
    <TextInput
      border="heavy"
      placeholder="search highway 9"
      aria-label="search highway 9"
    />
  );
}

<script setup lang="ts">
import { TextInput } from 'charcell/vue';
</script>

<template>
  <TextInput
    border="heavy"
    placeholder="search highway 9"
    aria-label="search highway 9"
  />
</template>

<script lang="ts">
  import { TextInput } from 'charcell/svelte';
</script>

<TextInput
  border="heavy"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

<input
  class="CharcellTextInput CharcellTextInput--border-top-heavy CharcellTextInput--border-end-heavy CharcellTextInput--border-bottom-heavy CharcellTextInput--border-start-heavy CharcellTextInput--boxed"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

import { TextInput } from 'charcell/react';

export function TextInputExample() {
  return (
    <TextInput
      border="double"
      placeholder="search highway 9"
      aria-label="search highway 9"
    />
  );
}

<script setup lang="ts">
import { TextInput } from 'charcell/vue';
</script>

<template>
  <TextInput
    border="double"
    placeholder="search highway 9"
    aria-label="search highway 9"
  />
</template>

<script lang="ts">
  import { TextInput } from 'charcell/svelte';
</script>

<TextInput
  border="double"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

<input
  class="CharcellTextInput CharcellTextInput--border-top-double CharcellTextInput--border-end-double CharcellTextInput--border-bottom-double CharcellTextInput--border-start-double CharcellTextInput--boxed"
  placeholder="search highway 9"
  aria-label="search highway 9"
/>

as text

at rest

┌──────────────────────┐
│ search highway 9     │
└──────────────────────┘

hover

┌──────────────────────┐
│ search highway 9     │
└──────────────────────┘

props

valuestring: The text, held by the consumer; pair it with onValueChange.; binds with v-model:value in vue, bind:value in svelte
onValueChange(value: string) => void: Called with the text on every change.
defaultValuestring: The text to start with, uncontrolled: the field owns it from there.
variant'boxed' | 'dense'= 'boxed': boxed draws the ring around the field; dense is a bare one-row faint strip, 16px tall, which misses WCAG 2.5.8's 24px target; boxed meets it.
border'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of every side of the boxed field's ring: single, rounded, heavy, double or none.
borderX'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's start and end sides, over border.
borderY'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's top and bottom sides, over border.
borderTop'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's top side, over borderY and border.
borderEnd'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's end side, over borderX and border.
borderBottom'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's bottom side, over borderY and border.
borderStart'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed field's ring's start side, over borderX and border.

it also takes any other attribute of its <input>.

usage

example

code

as text

props