Input

Basic usage

Value is: 

<script>
  let value = ''
</script>

<CInput bind:value placeholder="Input something" />
<h3>
  Value is: {value}
</h3>
<script>
  let value = ''
</script>

<CInput bind:value placeholder="Input something" />
<h3>
  Value is: {value}
</h3>
svelte
Click fold/expand code

Shapes

<script>
  let value = ''
</script>

<CInput bind:value placeholder="Normal input" />
<CInput bind:value rounded placeholder="Rounded input" />
<script>
  let value = ''
</script>

<CInput bind:value placeholder="Normal input" />
<CInput bind:value rounded placeholder="Rounded input" />
svelte
Click fold/expand code

Sizes

<script lang="ts">
  let value = ''
</script>

<div class="c-flex c-gutter-md c-wrap c-items-center">
  <div>
    <CInput bind:value placeholder="xs" size="xs" />
  </div>
  <div>
    <CInput bind:value placeholder="sm" size="sm" />
  </div>
  <div>
    <CInput bind:value placeholder="md (default)" />
  </div>
  <div>
    <CInput bind:value placeholder="lg" size="lg" />
  </div>
  <div>
    <CInput bind:value placeholder="xl" size="xl" />
  </div>
  <div>
    <CInput bind:value placeholder="xs" rounded size="xs" />
  </div>
  <div>
    <CInput bind:value placeholder="sm" size="sm" rounded />
  </div>
  <div>
    <CInput bind:value placeholder="md (default)" rounded />
  </div>
  <div>
    <CInput bind:value placeholder="lg" size="lg" rounded />
  </div>
  <div>
    <CInput bind:value placeholder="xl" size="xl" rounded />
  </div>
</div>
<script lang="ts">
  let value = ''
</script>

<div class="c-flex c-gutter-md c-wrap c-items-center">
  <div>
    <CInput bind:value placeholder="xs" size="xs" />
  </div>
  <div>
    <CInput bind:value placeholder="sm" size="sm" />
  </div>
  <div>
    <CInput bind:value placeholder="md (default)" />
  </div>
  <div>
    <CInput bind:value placeholder="lg" size="lg" />
  </div>
  <div>
    <CInput bind:value placeholder="xl" size="xl" />
  </div>
  <div>
    <CInput bind:value placeholder="xs" rounded size="xs" />
  </div>
  <div>
    <CInput bind:value placeholder="sm" size="sm" rounded />
  </div>
  <div>
    <CInput bind:value placeholder="md (default)" rounded />
  </div>
  <div>
    <CInput bind:value placeholder="lg" size="lg" rounded />
  </div>
  <div>
    <CInput bind:value placeholder="xl" size="xl" rounded />
  </div>
</div>
svelte
Click fold/expand code

Clearable

<script lang="ts">
  let value = ''
</script>

<CInput
  bind:value
  placeholder="Enter something and see the clear icon"
  clearable
/>
<script lang="ts">
  let value = ''
</script>

<CInput
  bind:value
  placeholder="Enter something and see the clear icon"
  clearable
/>
svelte
Click fold/expand code

Status

<script lang="ts">
  let value = ''
</script>

<CInput bind:value disabled placeholder="Disabled" />

<CInput rounded bind:value loading placeholder="Loading..." />

<CInput rounded bind:value placeholder="Readonly" readonly />
<script lang="ts">
  let value = ''
</script>

<CInput bind:value disabled placeholder="Disabled" />

<CInput rounded bind:value loading placeholder="Loading..." />

<CInput rounded bind:value placeholder="Readonly" readonly />
svelte
Click fold/expand code

Custom loading instance

<script lang="ts">
  let value = ''
</script>

<CInput bind:value placeholder="Custom loading" loading>
  <div slot="loading" class="c-text-primary">
    <CLoadingWifi />
  </div>
</CInput>

<CInput bind:value placeholder="Custom loading" loading>
  <div slot="loading" class="c-text-warning">
    <CLoadingCircleBars slot="loading" />
  </div>
</CInput>
<script lang="ts">
  let value = ''
</script>

<CInput bind:value placeholder="Custom loading" loading>
  <div slot="loading" class="c-text-primary">
    <CLoadingWifi />
  </div>
</CInput>

<CInput bind:value placeholder="Custom loading" loading>
  <div slot="loading" class="c-text-warning">
    <CLoadingCircleBars slot="loading" />
  </div>
</CInput>
svelte
Click fold/expand code

Prefix & Suffix

+234
@gmail.com
to:
@gmail.com
to:
@gmail.com
<script lang="ts">
  let value = ''
</script>

<div class="c-wrap c-flex c-gutter-md c-items-center">
  <div>
    <CInput rounded bind:value placeholder="With prefix">
      <svelte:fragment slot="prefix">+234</svelte:fragment>
    </CInput>
  </div>

  <div>
    <CInput rounded bind:value placeholder="With suffix">
      <svelte:fragment slot="suffix">@gmail.com</svelte:fragment>
    </CInput>
  </div>

  <div>
    <CInput rounded bind:value placeholder="With prefix and suffix">
      <svelte:fragment slot="prefix">to:</svelte:fragment>
      <svelte:fragment slot="suffix">@gmail.com</svelte:fragment>
    </CInput>
  </div>

  <div>
    <CInput
      rounded
      bind:value
      placeholder="No divider"
      prefixDivider={false}
      suffixDivider={false}
    >
      <svelte:fragment slot="prefix">to:</svelte:fragment>
      <svelte:fragment slot="suffix">@gmail.com</svelte:fragment>
    </CInput>
  </div>
  <div>
    <CInput bind:value placeholder="Use icons">
      <div slot="prefix" class="text-6 i-ph-address-book-thin" />
      <div slot="suffix" class="text-6 i-material-symbols-face-retouching-natural" />
    </CInput>
  </div>
</div>
<script lang="ts">
  let value = ''
</script>

<div class="c-wrap c-flex c-gutter-md c-items-center">
  <div>
    <CInput rounded bind:value placeholder="With prefix">
      <svelte:fragment slot="prefix">+234</svelte:fragment>
    </CInput>
  </div>

  <div>
    <CInput rounded bind:value placeholder="With suffix">
      <svelte:fragment slot="suffix">@gmail.com</svelte:fragment>
    </CInput>
  </div>

  <div>
    <CInput rounded bind:value placeholder="With prefix and suffix">
      <svelte:fragment slot="prefix">to:</svelte:fragment>
      <svelte:fragment slot="suffix">@gmail.com</svelte:fragment>
    </CInput>
  </div>

  <div>
    <CInput
      rounded
      bind:value
      placeholder="No divider"
      prefixDivider={false}
      suffixDivider={false}
    >
      <svelte:fragment slot="prefix">to:</svelte:fragment>
      <svelte:fragment slot="suffix">@gmail.com</svelte:fragment>
    </CInput>
  </div>
  <div>
    <CInput bind:value placeholder="Use icons">
      <div slot="prefix" class="text-6 i-ph-address-book-thin" />
      <div slot="suffix" class="text-6 i-material-symbols-face-retouching-natural" />
    </CInput>
  </div>
</div>
svelte
Click fold/expand code

CInput Props

  • value
    string | number
    default:

    The input value. It is recommended to use bind:value.

  • disabled
    boolean
    default: false

    Determine the input disabled status.

  • size
    'xs' | 'sm' | 'md' | 'lg' | 'xl'=
    default: undefined

    The size of input. Notice that the default value is md not undefined.

  • placeholder
    string=
    default:

    The placeholder of input dom.

  • rounded
    boolean
    default: false

    Determine whether the input has a rounded border or not.

    TIP

    Notice that rounded border size will be along with input size prop.

  • loading
    boolean
    default: false

    Determien whether the input is in loading status or not.

  • clearable
    boolean
    default: false

    Determine the input has a clear icon which can be clicked to clear the input value.

  • readonly
    boolean
    default: false

    Determine whether the input is readonly or not.

  • prefixDivider
    boolean
    default: true

    Determine whether the input has a divider between prefix content and value or not.

  • suffixDivider
    boolean
    default: true

    Determine whether the input has a divider between suffix content and value or not.

  • focused
    boolean
    default: false

    Determine whethter the input is focused or not. It is recommended to use bind:focus *

  • autoBlur
    boolean
    default: true

    Dose input auto blur.

  • type
    'text' | 'password'
    default: text

    The type of input.

  • customColor
    boolean
    default: false

    If set to true. The input will not change its' border, background, text color when focused , hover or blur.
    It is useful when you want to customize the input color style.

  • validateTrigger
    'change' | 'blur' | 'focus' | 'manual'
    default: blur

    The validate timing of input. It is only used when CInput is used in CForm and CFormItem context.

  • clearValidateOnFocus
    boolean
    default: true

    Determine whether the input would clear validate status when focused or not.

CInput Events

  • clear

    Clear icon click emit.

CInput Slots

  • prefix

    Customize prefix content

  • suffix

    Customize suffix content

  • loading

    Customize loading content

CInput Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55