This is the llms.txt documentation for the "inputs" directory of the Origin UI - Svelte project.
# "inputs" directory
> A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications.
This documentation covers 59 components, each following best practices for accessibility, performance, and type safety.
## Components
## input-01
> A type-safe, accessible input-01 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-01`
- **Location**: `/src/lib/components/inputs/input-01.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-01.svelte)
## input-02
> A type-safe, accessible input-02 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-02`
- **Location**: `/src/lib/components/inputs/input-02.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-02.svelte)
## input-03
> A type-safe, accessible input-03 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-03`
- **Location**: `/src/lib/components/inputs/input-03.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
We won't share your email with anyone
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-03.svelte)
## input-04
> A type-safe, accessible input-04 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-04`
- **Location**: `/src/lib/components/inputs/input-04.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Optional
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-04.svelte)
## input-05
> A type-safe, accessible input-05 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-05`
- **Location**: `/src/lib/components/inputs/input-05.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-05.svelte)
## input-06
> A type-safe, accessible input-06 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-06`
- **Location**: `/src/lib/components/inputs/input-06.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Email is invalid
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-06.svelte)
## input-07
> A type-safe, accessible input-07 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-07`
- **Location**: `/src/lib/components/inputs/input-07.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-07.svelte)
## input-08
> A type-safe, accessible input-08 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-08`
- **Location**: `/src/lib/components/inputs/input-08.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-08.svelte)
## input-09
> A type-safe, accessible input-09 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-09`
- **Location**: `/src/lib/components/inputs/input-09.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-09.svelte)
## input-10
> A type-safe, accessible input-10 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-10`
- **Location**: `/src/lib/components/inputs/input-10.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-10.svelte)
## input-11
> A type-safe, accessible input-11 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-11`
- **Location**: `/src/lib/components/inputs/input-11.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
https://
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-11.svelte)
## input-12
> A type-safe, accessible input-12 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-12`
- **Location**: `/src/lib/components/inputs/input-12.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
.com
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-12.svelte)
## input-13
> A type-safe, accessible input-13 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-13`
- **Location**: `/src/lib/components/inputs/input-13.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
€
EUR
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-13.svelte)
## input-14
> A type-safe, accessible input-14 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-14`
- **Location**: `/src/lib/components/inputs/input-14.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
https://
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-14.svelte)
## input-15
> A type-safe, accessible input-15 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-15`
- **Location**: `/src/lib/components/inputs/input-15.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
.com
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-15.svelte)
## input-16
> A type-safe, accessible input-16 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-16`
- **Location**: `/src/lib/components/inputs/input-16.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
€
EUR
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-16.svelte)
## input-17
> A type-safe, accessible input-17 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-17`
- **Location**: `/src/lib/components/inputs/input-17.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-17.svelte)
## input-18
> A type-safe, accessible input-18 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-18`
- **Location**: `/src/lib/components/inputs/input-18.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-18.svelte)
## input-19
> A type-safe, accessible input-19 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-19`
- **Location**: `/src/lib/components/inputs/input-19.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-19.svelte)
## input-20
> A type-safe, accessible input-20 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-20`
- **Location**: `/src/lib/components/inputs/input-20.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-20.svelte)
## input-21
> A type-safe, accessible input-21 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-21`
- **Location**: `/src/lib/components/inputs/input-21.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-21.svelte)
## input-22
> A type-safe, accessible input-22 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-22`
- **Location**: `/src/lib/components/inputs/input-22.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-22.svelte)
## input-23
> A type-safe, accessible input-23 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-23`
- **Location**: `/src/lib/components/inputs/input-23.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-23.svelte)
## input-24
> A type-safe, accessible input-24 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-24`
- **Location**: `/src/lib/components/inputs/input-24.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#if inputValue}
{/if}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-24.svelte)
## input-25
> A type-safe, accessible input-25 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-25`
- **Location**: `/src/lib/components/inputs/input-25.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
⌘K
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-25.svelte)
## input-26
> A type-safe, accessible input-26 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-26`
- **Location**: `/src/lib/components/inputs/input-26.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-26.svelte)
## input-27
> A type-safe, accessible input-27 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-27`
- **Location**: `/src/lib/components/inputs/input-27.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#if isLoading}
{:else}
{/if}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-27.svelte)
## input-28
> A type-safe, accessible input-28 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-28`
- **Location**: `/src/lib/components/inputs/input-28.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-28.svelte)
## input-29
> A type-safe, accessible input-29 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-29`
- **Location**: `/src/lib/components/inputs/input-29.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-29.svelte)
## input-30
> A type-safe, accessible input-30 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-30`
- **Location**: `/src/lib/components/inputs/input-30.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-30.svelte)
## input-31
> A type-safe, accessible input-31 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-31`
- **Location**: `/src/lib/components/inputs/input-31.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-31.svelte)
## input-32
> A type-safe, accessible input-32 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-32`
- **Location**: `/src/lib/components/inputs/input-32.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-32.svelte)
## input-33
> A type-safe, accessible input-33 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-33`
- **Location**: `/src/lib/components/inputs/input-33.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-33.svelte)
## input-34
> A type-safe, accessible input-34 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-34`
- **Location**: `/src/lib/components/inputs/input-34.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-34.svelte)
## input-35
> A type-safe, accessible input-35 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-35`
- **Location**: `/src/lib/components/inputs/input-35.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{characterLimit.maxLength - characterLimit.characterCount} characters
left
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-35.svelte)
## input-36
> A type-safe, accessible input-36 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-36`
- **Location**: `/src/lib/components/inputs/input-36.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
Full component implementation:
```svelte
{#snippet children({ segments })}
{#each segments as { part, value }}
{value}
{/each}
{/snippet}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-36.svelte)
## input-37
> A type-safe, accessible input-37 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-37.todo`
- **Location**: `/src/lib/components/inputs/input-37.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-37.todo.svelte)
## input-38
> A type-safe, accessible input-38 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-38.todo`
- **Location**: `/src/lib/components/inputs/input-38.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-38.todo.svelte)
## input-39
> A type-safe, accessible input-39 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-39.todo`
- **Location**: `/src/lib/components/inputs/input-39.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-39.todo.svelte)
## input-40
> A type-safe, accessible input-40 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-40.todo`
- **Location**: `/src/lib/components/inputs/input-40.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-40.todo.svelte)
## input-41
> A type-safe, accessible input-41 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-41.todo`
- **Location**: `/src/lib/components/inputs/input-41.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-41.todo.svelte)
## input-42
> A type-safe, accessible input-42 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-42`
- **Location**: `/src/lib/components/inputs/input-42.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@internationalized/date`](https://github.com/adobe/react-spectrum/tree/main/packages/@internationalized/date)
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#each ['start', 'end'] as const as type (type)}
{#snippet children({ segments })}
{#each segments as { part, value }}
{value}
{/each}
{/snippet}
{#if type === 'start'}
-
{/if}
{/each}
{#snippet children({ months, weekdays })}
{#each months as month (month.value)}
{#each weekdays as day (day)}
{day.slice(0, 2)}
{/each}
{#each month.weeks as weekDates (weekDates.join('-'))}
{#each weekDates as date (date.day)}
{date.day}
{/each}
{/each}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-42.svelte)
## input-43
> A type-safe, accessible input-43 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-43`
- **Location**: `/src/lib/components/inputs/input-43.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`@internationalized/date`](https://github.com/adobe/react-spectrum/tree/main/packages/@internationalized/date)
- [`bits-ui`](https://github.com/huntabyte/bits-ui)
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#each ['start', 'end'] as const as type (type)}
{#snippet children({ segments })}
{#each segments as { part, value }}
{value}
{/each}
{/snippet}
{#if type === 'start'}
-
{/if}
{/each}
{#snippet children({ months, weekdays })}
{#each months as month (month.value)}
{#each weekdays as day (day)}
{day.slice(0, 2)}
{/each}
{#each month.weeks as weekDates (weekDates.join('-'))}
{#each weekDates as date (date.day)}
{date.day}
{/each}
{/each}
{/each}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-45.svelte)
## input-46
> A type-safe, accessible input-46 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-46`
- **Location**: `/src/lib/components/inputs/input-46.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-46.svelte)
## input-47
> A type-safe, accessible input-47 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-47.todo`
- **Location**: `/src/lib/components/inputs/input-47.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-47.todo.svelte)
## input-48
> A type-safe, accessible input-48 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-48.todo`
- **Location**: `/src/lib/components/inputs/input-48.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-48.todo.svelte)
## input-49
> A type-safe, accessible input-49 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-49.todo`
- **Location**: `/src/lib/components/inputs/input-49.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-49.todo.svelte)
## input-50
> A type-safe, accessible input-50 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-50.todo`
- **Location**: `/src/lib/components/inputs/input-50.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-50.todo.svelte)
## input-51
> A type-safe, accessible input-51 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-51`
- **Location**: `/src/lib/components/inputs/input-51.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{passwordStrength.strengthText}. Must contain:
{#each passwordStrength.strength as req (req.text)}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-51.svelte)
## input-52
> A type-safe, accessible input-52 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-52`
- **Location**: `/src/lib/components/inputs/input-52.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-52.svelte)
## input-53
> A type-safe, accessible input-53 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-53`
- **Location**: `/src/lib/components/inputs/input-53.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#snippet child({ props })}
{/snippet}
Copy to clipboard
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-53.svelte)
## input-54
> A type-safe, accessible input-54 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-54`
- **Location**: `/src/lib/components/inputs/input-54.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`inputmask`](https://github.com/RobinHerbots/Inputmask)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-54.svelte)
## input-55
> A type-safe, accessible input-55 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-55`
- **Location**: `/src/lib/components/inputs/input-55.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`inputmask`](https://github.com/RobinHerbots/Inputmask)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-55.svelte)
## input-56
> A type-safe, accessible input-56 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-56`
- **Location**: `/src/lib/components/inputs/input-56.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-56.svelte)
## input-57
> A type-safe, accessible input-57 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-57.todo`
- **Location**: `/src/lib/components/inputs/input-57.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-57.todo.svelte)
## input-58
> A type-safe, accessible input-58 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-58.todo`
- **Location**: `/src/lib/components/inputs/input-58.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-58.todo.svelte)
## input-59
> A type-safe, accessible input-59 component for building modern UIs. This component is part of the inputs collection.
### Core Information
- **Component ID**: `input-59.todo`
- **Location**: `/src/lib/components/inputs/input-59.todo.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/inputs/input-59.todo.svelte)