Input

<script setup lang="ts">
import { ref } from 'vue';
import { CfInput } from '@chufix-design/vue';

const name = ref('');
</script>

<template>
<CfInput v-model="name" placeholder="Enter username" />
</template>

import { useState } from 'react';
import { CfInput } from '@chufix-design/react';

export default function Demo() {
const [name, setName] = useState('');
return (
  <CfInput
    value={name}
    onChange={(e) => setName(e.target.value)}
    placeholder="Enter username"
  />
);
}

<CfInput variant="outline" placeholder="outline · default" />
<CfInput variant="filled" placeholder="filled · gray fill" />
<CfInput variant="ghost" placeholder="ghost · borderless, appears on focus" />

<CfInput variant="outline" placeholder="outline · default" />
<CfInput variant="filled" placeholder="filled · gray fill" />
<CfInput variant="ghost" placeholder="ghost · borderless, appears on focus" />

<CfInput size="sm" placeholder="Small" />
<CfInput size="md" placeholder="Medium" />
<CfInput size="lg" placeholder="Large" />

<CfInput size="sm" placeholder="Small" />
<CfInput size="md" placeholder="Medium" />
<CfInput size="lg" placeholder="Large" />

<script setup lang="ts">
import { ref } from 'vue';
import { CfInput } from '@chufix-design/vue';

const email = ref('not-an-email');
const valid = (s: string) => /.+@.+\..+/.test(s);
</script>

<template>
<CfInput v-model="search" clearable placeholder="Clearable (× appears once typed)" />
<CfInput
  v-model="email"
  :error="!valid(email)"
  placeholder="Error state: invalid email"
/>
<CfInput placeholder="Disabled" disabled />
<CfInput placeholder="Readonly" readonly model-value="readonly content" />
</template>

import { useState } from 'react';
import { CfInput } from '@chufix-design/react';

export default function Demo() {
const [email, setEmail] = useState('not-an-email');
const valid = /.+@.+\..+/.test(email);

return (
  <>
    <CfInput clearable placeholder="Clearable (× appears once typed)" />
    <CfInput
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      error={!valid}
      placeholder="Error state: invalid email"
    />
    <CfInput placeholder="Disabled" disabled />
    <CfInput placeholder="Readonly" readOnly defaultValue="readonly content" />
  </>
);
}

<CfInput v-model="url" placeholder="example">
<template #prefix>https://</template>
<template #suffix>.com</template>
</CfInput>

<CfInput v-model="search" clearable placeholder="Search…">
<template #prefix>
  <SearchIcon />
</template>
</CfInput>

<CfInput
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="example"
prefix={<>https://</>}
suffix={<>.com</>}
/>

<CfInput
value={search}
onChange={(e) => setSearch(e.target.value)}
clearable
placeholder="Search…"
prefix={<SearchIcon />}
/>