Input

The Input and Textarea components are styled native inputs that work standalone or inside a Field. They are built on Ark UI field, sourced from Shark UI, sharing the inputVariants cva from @cloudvoyant/helical-ui.

EmailWe'll never share your email.

Email We'll never share your email.

// apps/docs/src/components/examples/input/default/react.tsx
import { Field, FieldLabel, FieldHelper, Input } from '@cloudvoyant/helical-react';

export default function ReactInputDefault() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Email</FieldLabel>
      <Input type="email" placeholder="you@example.com" />
      <FieldHelper>We'll never share your email.</FieldHelper>
    </Field>
  );
}

<!-- apps/docs/src/components/examples/input/default/svelte.svelte -->
<script lang="ts">
  import { Field, FieldLabel, FieldHelper, Input } from '@cloudvoyant/helical-svelte';
</script>

<Field class="max-w-sm">
  <FieldLabel>Email</FieldLabel>
  <Input type="email" placeholder="you@example.com" />
  <FieldHelper>We'll never share your email.</FieldHelper>
</Field>

Examples

Textarea

Message

// apps/docs/src/components/examples/input/textarea/react.tsx
import { Field, FieldLabel, Textarea } from '@cloudvoyant/helical-react';

export default function ReactInputTextarea() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Message</FieldLabel>
      <Textarea placeholder="Type your message…" rows={4} />
    </Field>
  );
}

<!-- apps/docs/src/components/examples/input/textarea/svelte.svelte -->
<script lang="ts">
  import { Field, FieldLabel, Textarea } from '@cloudvoyant/helical-svelte';
</script>

<Field class="max-w-sm">
  <FieldLabel>Message</FieldLabel>
  <Textarea placeholder="Type your message…" rows={4} />
</Field>

API Reference

Input

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height/padding scale.

Also accepts all Ark FieldInput props (type, placeholder, disabled, value, onChange, …).

Textarea

Props

Accepts all Ark FieldTextarea props (rows, placeholder, disabled, …) plus className/class.

Accessibility

Ark renders a native <input>/<textarea> with no extra role. Invalid state is announced via aria-invalid when inside a Field; pair with FieldLabel/FieldError for full labelling.

Theming

No theme extension — uses --input, --ring, --destructive, --muted-foreground tokens, light and dark.