Kleri UI

Component Preview

Input

The fields a Kleri app uses to take in a matter: text, choices, toggles, ranges and files. They share one label, error and focus treatment, so a form reads the same wherever it appears.

Text entry

Typed answers, one line or many.

KleriInput

Single-line text, from a client's name to a CNR number. Password fields get a show and hide button.

Rest
Focus

Add the year, e.g. MAH/1234/2019, as on the enrolment certificate.

Error
Disabled
With icon
Password

Props

Type

Required

false

Disabled

false

With border

true

Off hides the resting outline but keeps its space, for fields inside a bordered panel. Focus and errors still draw it.

Shown under the label and read out by screen readers. Clear it to fix the field.

Shake

false

Shakes once without an error, e.g. when a submit is blocked. Errors shake on their own.

Usage 
<script lang="ts">
  import { KleriInput } from '@kleri/ui';

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

<KleriInput
  bind:value
  label="Client name"
  placeholder="e.g. Meera Iyer"
/>

KleriTextarea

Free text that runs past one line: case notes, client instructions, a hearing summary.

Rest
Focus

Write a summary before sending the client update.

Error
Disabled
With icon

Props

Resize

Required

false

Disabled

false

With border

true

Off hides the resting outline but keeps its space, for fields inside a bordered panel. Focus and errors still draw it.

Shown under the label and read out by screen readers. Clear it to fix the field.

Shake

false

Shakes once without an error, e.g. when a submit is blocked. Errors shake on their own.

Usage 
<script lang="ts">
  import { KleriTextarea } from '@kleri/ui';

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

<KleriTextarea
  bind:value
  label="Matter notes"
  placeholder="Hearing outcome, next steps, documents still due from the client…"
/>

Choice

Pick from a list the app already knows.

KleriSelect

Pick one from a short, fixed list, such as the court a matter is filed in. Options can carry an icon or an avatar.

Rest
Focus

Choose the court this matter is filed in.

Error
Disabled

Props

Required

false

Disabled

false

With border

true

Off hides the resting outline but keeps its space, for fields inside a bordered panel. Focus and errors still draw it.

Shown under the label and read out by screen readers. Clear it to fix the field.

Shake

false

Shakes once without an error, e.g. when a submit is blocked. Errors shake on their own.

Usage 
<script lang="ts">
  import { KleriSelect } from '@kleri/ui';
  import { Landmark, Scale } from '@lucide/svelte';

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

<KleriSelect
  bind:value
  items={[
    {
      value: 'sc',
      label: 'Supreme Court of India',
      icon: Landmark
    },
    {
      value: 'bom-hc',
      label: 'Bombay High Court',
      icon: Landmark
    },
    {
      value: 'del-hc',
      label: 'Delhi High Court',
      icon: Landmark
    },
    {
      value: 'pune-dc',
      label: 'District Court, Pune',
      icon: Scale
    },
    {
      value: 'nclt-mum',
      label: 'NCLT, Mumbai Bench',
      icon: Scale
    }
  ]}
  label="Court"
  placeholder="Choose a court"
/>

KleriCombobox

Search a long list as you type, like the firm's client roster. Each option can carry a second line of detail.

Rest
Focus

Pick a client from the list, or add them as a new client first.

Error
Disabled

Props

Shown when the search matches nothing.

Required

false

Disabled

false

Allow deselect

false

Picking the selected client again clears the field.

With border

true

Off hides the resting outline but keeps its space, for fields inside a bordered panel. Focus and errors still draw it.

Shown under the label and read out by screen readers. Clear it to fix the field.

Shake

false

Shakes once without an error, e.g. when a submit is blocked. Errors shake on their own.

Usage 
<script lang="ts">
  import { KleriCombobox } from '@kleri/ui';

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

<KleriCombobox
  bind:value
  items={[
    {
      value: 'iyer',
      label: 'Meera Iyer',
      description: 'Individual · 2 open matters'
    },
    {
      value: 'coastal',
      label: 'Coastal Builders Pvt. Ltd.',
      description: 'Company · 5 open matters'
    },
    {
      value: 'rao-trust',
      label: 'Rao Family Trust',
      description: 'Trust · 1 open matter'
    },
    {
      value: 'deccan',
      label: 'Deccan Agro Exports LLP',
      description: 'LLP · 3 open matters'
    },
    {
      value: 'menon',
      label: 'Arvind Menon',
      description: 'Individual · no open matters'
    }
  ]}
  label="Client"
  placeholder="Search clients…"
  emptyText="No client by that name. Check the spelling, or add them as a new client."
/>

Toggles

Settings and modes that apply the moment they change.

KleriSwitch

An on or off setting that takes effect straight away, with no save button.

Off
On
Focus

Accept the engagement terms to open the matter.

Error
Disabled

Props

Checked

false

Disabled

false

Shown under the label and read out by screen readers. Clear it to fix the field.

Shake

false

Shakes once without an error, e.g. when a submit is blocked. Errors shake on their own.

Usage 
<script lang="ts">
  import { KleriSwitch } from '@kleri/ui';

  let value = $state(false);
</script>

<KleriSwitch
  bind:value
  label="Email me the cause list each morning"
/>

KleriToggleGroup

A row of buttons for picking one mode or filter, such as which matters to list. Arrow keys move between them.

Rest
Focus
Disabled

Props

Variant

Size

Orientation

Disabled

false

Tailwind classes for the pressed item. The default is the brand gradient.

Usage 
<script lang="ts">
  import { KleriToggleGroup, KleriToggleGroupItem } from '@kleri/ui';

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

<KleriToggleGroup
  bind:value
  type="single"
  aria-label="Matter status"
>
  <KleriToggleGroupItem value="open">Open</KleriToggleGroupItem>
  <KleriToggleGroupItem value="on-hold">On hold</KleriToggleGroupItem>
  <KleriToggleGroupItem value="closed">Closed</KleriToggleGroupItem>
</KleriToggleGroup>

Range

A number, or a span between two, along a scale.

KleriSlider

Drag or use the arrow keys to set a number, or a range with two thumbs. Screen readers hear the formatted value.

Reminder lead time
Rest
Adjournment buffer
Focus
Notice period 1 day

Give the client at least 2 days’ notice.

Error
Limitation buffer
Disabled
Hearing window 4 days – 9 days
Range
Remind me before a hearing 3 days

Props

Type

Multiple adds a second thumb to pick a range.

Show value

true

Disabled

false

Shown under the label and read out by screen readers. Clear it to fix the field.

Shake

false

Shakes once without an error, e.g. when a submit is blocked. Errors shake on their own.

Usage 
<script lang="ts">
  import { KleriSlider } from '@kleri/ui';

  let value = $state(3);
</script>

<KleriSlider
  bind:value
  label="Remind me before a hearing"
  showValue={true}
  min={1}
  max={14}
  valueFormatter={(v) => `${v} ${v === 1 ? 'day' : 'days'}`}
/>

Files

Documents and images, dropped in or picked from disk.

KleriDragNDrop

Drop files or click to browse. It checks each file's type as it arrives and previews the latest image. A Tauri version takes native file paths.

Signed vakalatnama

Drop files here or click to browse

Supports PDF files

Rest
Certified copy of the order

Attach the certified copy before filing the appeal.

Drop files here or click to browse

Supports PDF files

Error
Filed documents

Drop files here or click to browse

Supports PDF files

Disabled
Vakalatnama and annexures

Drop files here or click to browse

Supports PDF and image files

No files added yet.

Props

Comma-separated: image, pdf, ics. Leave empty to accept any file.

Leave empty to list the allowed types automatically.

Multiple

true

Off keeps one file: a new drop replaces it.

Disabled

false

Shown under the label and read out by screen readers. Clear it to fix the field.

Usage 
<script lang="ts">
  import { KleriDragNDrop } from '@kleri/ui';
</script>

<KleriDragNDrop
  allowedTypes={['pdf', 'image']}
  label="Vakalatnama and annexures"
  onDrop={(files) => console.log(files)}
/>