# Form Controls

> Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.

Source: https://bootstrap-svelte.vercel.app/form/form-controls — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Accessibility

- Pair every visible control with `Form.InputLabel`, `Form.CheckLabel`, or an equivalent accessible label.
- Use helper text for accepted file types, formatting requirements, and validation expectations.
- Avoid relying on `title` or placeholder text as the only accessible name.
- Check contrast for button-style form controls when using light outline variants on white backgrounds.

## ButtonCheck Inputs

Use `ButtonCheck` to bind checkbox and radio toggle inputs.

```html
<script lang="ts">
    let buttonCheckCheckedValue: boolean = $state(false);
    let buttonCheckCheckboxGroupValues: string[] = $state([]);
    let buttonCheckRadioGroupValue: string = $state('option1');
</script>

<ButtonCheck colorVariant="outline-primary" id="btnCheckDefault" value="default">Default</ButtonCheck>
<ButtonCheck checked colorVariant="outline-primary" id="btnCheckChecked" value="checked">Checked</ButtonCheck>
<ButtonCheck disabled colorVariant="outline-primary" id="btnCheckDisabled" value="disabled">Disabled</ButtonCheck>

<hr/>

<ButtonCheck bind:checked={buttonCheckCheckedValue} colorVariant="outline-success" id="btnCheckBounded" value="bound">
    Toggle checked state
</ButtonCheck>
<span>Output:</span>&nbsp;<code>{buttonCheckCheckedValue}</code>

<hr/>

<ButtonCheck bind:group={buttonCheckCheckboxGroupValues} colorVariant="outline-secondary" id="btnGroupCheck1" value="option1">
    Option 1
</ButtonCheck>
<ButtonCheck bind:group={buttonCheckCheckboxGroupValues} colorVariant="outline-secondary" id="btnGroupCheck2" value="option2">
    Option 2
</ButtonCheck>
<span>Output:</span>&nbsp;<code>{buttonCheckCheckboxGroupValues}</code>

<hr/>

<ButtonCheck bind:group={buttonCheckRadioGroupValue} colorVariant="outline-secondary" id="btnGroupRadio1" name="btnGroupRadio" type="radio" value="option1">
    Option 1
</ButtonCheck>
<ButtonCheck bind:group={buttonCheckRadioGroupValue} colorVariant="outline-secondary" id="btnGroupRadio2" name="btnGroupRadio" type="radio" value="option2">
    Option 2
</ButtonCheck>
<span>Output:</span>&nbsp;<code>{buttonCheckRadioGroupValue}</code>
```

## Checkbox Input

⚠️ Readonly and plaintext are not supported.

```html
<script lang="ts">
    let checkedValue: boolean = $state(false);
    let checkGroupValues: string[] = $state([]);
</script>
<Form.Check><!-- Default -->
    <Form.CheckInput id="checkDefault" name="checkDefault" value="" />
    <Form.CheckLabel for="checkDefault">Default checkbox</Form.CheckLabel>
</Form.Check>
<Form.Check><!-- Checked -->
    <Form.CheckInput checked id="checkChecked" name="checkChecked" value="" />
    <Form.CheckLabel for="checkChecked">Checked checkbox</Form.CheckLabel>
</Form.Check>
<Form.Check><!-- Disabled -->
    <Form.CheckInput disabled id="checkDisabled" name="checkDisabled" value="" />
    <Form.CheckLabel for="checkDisabled">Disabled checkbox</Form.CheckLabel>
</Form.Check>
<Form.Check><!-- Disabled checked -->
    <Form.CheckInput checked disabled id="checkDisabledChecked" name="checkDisabledChecked" value="" />
    <Form.CheckLabel for="checkDisabledChecked">Disabled checked checkbox</Form.CheckLabel>
</Form.Check>
<Form.Check><!-- Indeterminate checkbox -->
    <Form.CheckInput id="checkReadonly" isIndeterminate={true} name="checkReadonly" value="" />
    <Form.CheckLabel for="checkReadonly">Indeterminate checkbox (via JavaScript)</Form.CheckLabel>
</Form.Check>
<hr/>
<Form.Check><!-- Checked bounded value -->
    <Form.CheckInput bind:checked={checkedValue} id="checkBounded" name="checkBounded" />
    <Form.CheckLabel for="checkBounded">Checked bounded value</Form.CheckLabel>
</Form.Check>
<span>Output:</span>&nbsp;<code>{checkedValue}</code>
<hr/>
<Form.Check isInline>
    <Form.CheckInput bind:group={checkGroupValues} id="groupBounded1" name="groupBounded" value="option1" />
    <Form.CheckLabel for="groupBounded1">Option 1</Form.CheckLabel>
</Form.Check>
<Form.Check isInline>
    <Form.CheckInput bind:group={checkGroupValues} id="groupBounded2" name="groupBounded" value="option2" />
    <Form.CheckLabel for="groupBounded2">Option 2</Form.CheckLabel>
</Form.Check>
<span>Output:</span>&nbsp;<code>{checkGroupValues}</code>
```

## Color Input

⚠️ Readonly and plaintext are not supported.

```html
<script lang="ts">
    let colorInputValue: string = $state("#563d7c");
</script>
<Form.InputLabel for="colorDefault">Default color</Form.InputLabel>
<Form.ColorInput id="colorDefault" value="#563d7c" />

<Form.InputLabel for="colorDisabled">Disabled color</Form.InputLabel>
<Form.ColorInput id="colorDisabled" disabled value="#563d7c" />

<Form.InputLabel for="colorSmall">Small color</Form.InputLabel>
<Form.ColorInput id="colorSmall" sizing="sm" value="#563d7c" />

<Form.InputLabel for="colorLarge">Large color</Form.InputLabel>
<Form.ColorInput id="colorLarge" sizing="lg" value="#563d7c" />

<Form.InputLabel for="colorBound">Bound color</Form.InputLabel>
<Form.ColorInput id="colorBound" bind:value={colorInputValue} />
<span>Output:</span>&nbsp;<code>{colorInputValue}</code>
```

## Date Input

```html
<script lang="ts">
    let dateInputValue: string = $state("2025-06-10");
</script>
<Form.DateInput value="2025-06-10" aria-label="Choose date" title="Choose your date" /><!-- Default -->
<Form.DateInput disabled value="2025-06-10" aria-label="Choose date" title="Choose your date" /><!-- Disabled -->
<Form.DateInput readonly value="2025-06-10" aria-label="Choose date" title="Choose your date" /><!-- Readonly -->
<Form.DateInput isPlaintext readonly value="2025-06-10" aria-label="Choose date" title="Choose your date" /><!-- Readonly plaintext -->
<Form.DateInput sizing="sm" value="2025-06-10" aria-label="Choose date" title="Choose your date" /><!-- Small sizing -->
<Form.DateInput sizing="lg" value="2025-06-10" aria-label="Choose date" title="Choose your date" /><!-- Large sizing -->
<Form.DateInput list="listOfDates" aria-label="Choose date" title="Choose your date" /><!-- Datalist -->
<datalist id="listOfDates">
    <option value="2025-01-01"></option>
    <option value="2025-02-01"></option>
    <option value="2025-03-01"></option>
    <option value="2025-04-01"></option>
    <option value="2025-05-01"></option>
    <option value="2025-06-01"></option>
    <option value="2025-07-01"></option>
    <option value="2025-08-01"></option>
    <option value="2025-09-01"></option>
    <option value="2025-10-01"></option>
    <option value="2025-11-01"></option>
    <option value="2025-12-01"></option>
</datalist>
<Form.DateInput bind:value={dateInputValue} aria-label="Choose date" title="Choose your date" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{dateInputValue}</code>
```

## Datetime-local Input

```html
<script lang="ts">
    let datetimeLocalInputValue: string = $state("2025-06-10T19:30");
</script>
<Form.DatetimeLocalInput aria-label="Choose date and time" title="Choose your datetime local" value="2025-06-10T19:30" /><!-- Default -->
<Form.DatetimeLocalInput disabled aria-label="Choose date and time" title="Choose your datetime local" value="2025-06-10T19:30" /><!-- Disabled -->
<Form.DatetimeLocalInput readonly aria-label="Choose date and time" title="Choose your datetime local" value="2025-06-10T19:30" /><!-- Readonly -->
<Form.DatetimeLocalInput isPlaintext readonly aria-label="Choose date and time" title="Choose your datetime local" value="2025-06-10T19:30" /><!-- Readonly plaintext -->
<Form.DatetimeLocalInput sizing="sm" aria-label="Choose date and time" title="Choose your datetime local" value="2025-06-10T19:30" /><!-- Small sizing -->
<Form.DatetimeLocalInput sizing="lg" aria-label="Choose date and time" title="Choose your datetime local" value="2025-06-10T19:30" /><!-- Large sizing -->
<Form.DatetimeLocalInput list="listOfDatetimes" aria-label="Choose date and time" title="Choose your datetime local" /><!-- Datalist -->
<datalist id="listOfDatetimes">
    <option value="2025-01-01T00:00"></option>
    <option value="2025-02-01T00:00"></option>
    <option value="2025-03-01T00:00"></option>
    <option value="2025-04-01T00:00"></option>
    <option value="2025-05-01T00:00"></option>
    <option value="2025-06-01T00:00"></option>
    <option value="2025-07-01T00:00"></option>
    <option value="2025-08-01T00:00"></option>
    <option value="2025-09-01T00:00"></option>
    <option value="2025-10-01T00:00"></option>
</datalist>
<Form.DatetimeLocalInput aria-label="Choose date and time" title="Choose your datetime local" bind:value={datetimeLocalInputValue} /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{datetimeLocalInputValue}</code>
```

## Email Input

```html
<script lang="ts">
    let emailInputValue: string = $state('');
</script>
<Form.EmailInput placeholder="name@example.com" /><!-- Default -->
<Form.EmailInput disabled placeholder="name@example.com" /><!-- Disabled -->
<Form.EmailInput placeholder="name@example.com" readonly /><!-- Readonly -->
<Form.EmailInput isPlaintext readonly placeholder="name@example.com" /><!-- Readonly plaintext -->
<Form.EmailInput sizing="sm" placeholder="name@example.com" /><!-- Small sizing -->
<Form.EmailInput sizing="lg" placeholder="name@example.com" /><!-- Large sizing -->
<Form.EmailInput list="listOfEmails" pattern=".+@example.com" placeholder="name@example.com" /><!-- Datalist -->
<datalist id="listOfEmails">
    <option value="alex@example.com"></option>
    <option value="casey@example.com"></option>
    <option value="jordan@example.com"></option>
</datalist>
<Form.EmailInput bind:value={emailInputValue} placeholder="type something" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{emailInputValue}</code>
```

## File Input

⚠️ Readonly and plaintext are not supported.

```html
<script lang="ts">
    let fileInputValue: FileList | null = $state(null);
</script>
<Form.InputLabel for="fileDefault">Upload image</Form.InputLabel>
<Form.FileInput id="fileDefault" accept=".png, .jpg, image/png, image/jpeg" name="newFile" />
<Form.HelperText>Accepts PNG or JPG files.</Form.HelperText>

<Form.InputLabel for="fileDisabled">Disabled upload</Form.InputLabel>
<Form.FileInput id="fileDisabled" accept=".png, .jpg, image/png, image/jpeg" disabled name="newFileDisabled" />

<Form.InputLabel for="fileSmall">Small upload</Form.InputLabel>
<Form.FileInput id="fileSmall" accept=".png, .jpg, image/png, image/jpeg" name="newFileSmall" sizing="sm" />

<Form.InputLabel for="fileLarge">Large upload</Form.InputLabel>
<Form.FileInput id="fileLarge" accept=".png, .jpg, image/png, image/jpeg" name="newFileLarge" sizing="lg" />

<Form.InputLabel for="fileBound">Bound upload</Form.InputLabel>
<Form.FileInput id="fileBound" accept=".png, .jpg, image/png, image/jpeg" bind:files={fileInputValue} name="newFileBound" />
<span>Output:</span>&nbsp;<code>{fileInputValue?.[0]?.name ?? 'No file selected'}</code>
```

## Floating labels

⚠️ Sizing props are ignored and readonly is not useful.

```html
<Form.Floating><!-- Default -->
    <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" />
    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
</Form.Floating>
<Form.Floating><!-- Disabled -->
    <Form.EmailInput disabled placeholder="name@example.com" id="floatingEmailInput" />
    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
</Form.Floating>
<Form.Floating><!-- Readonly -->
    <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" readonly />
    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
</Form.Floating>
<Form.Floating><!-- Readonly plaintext -->
    <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" isPlaintext readonly />
    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
</Form.Floating>
<Form.Floating><!-- Small sizing -->
    <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" sizing="sm" />
    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
</Form.Floating>
<Form.Floating><!-- Large sizing -->
    <Form.EmailInput placeholder="name@example.com" id="floatingEmailInput" sizing="lg" />
    <Form.InputLabel for="floatingEmailInput" isFloating>Email address</Form.InputLabel>
</Form.Floating>
```

## Hidden Input

⚠️ Bootstrap 5 does not have a specific "hidden input" type. As a result, this component will simply render the input without any Bootstrap CSS classes.

```html
<script lang="ts">
    let hiddenInputValue: string = $state('Nothing to see here as well');
</script>
<Form.HiddenInput name="hiddenInput" value="Nothing to see here" />
<Form.HiddenInput name="hiddenInput2" bind:value={hiddenInputValue} />
```

## Image Input

⚠️ Bootstrap 5 does not have a specific "image input" type. As a result, this component will simply render the input without any Bootstrap CSS classes.

```html
<Form.ImageInput src="https://www.w3schools.com/tags/img_submit.gif" alt="Submit" width="48" height="48" />
```

## Month Input

```html
<script lang="ts">
    let monthInputValue: string = $state('2025-06');
</script>
<Form.MonthInput aria-label="Choose month" title="Choose a month" value="2025-06" /><!-- Default -->
<Form.MonthInput disabled aria-label="Choose month" title="Choose a month" value="2025-06" /><!-- Disabled -->
<Form.MonthInput readonly aria-label="Choose month" title="Choose a month" value="2025-06" /><!-- Readonly -->
<Form.MonthInput isPlaintext readonly aria-label="Choose month" title="Choose a month" value="2025-06" /><!-- Readonly plaintext -->
<Form.MonthInput sizing="sm" aria-label="Choose month" title="Choose a month" value="2025-06" /><!-- Small sizing -->
<Form.MonthInput sizing="lg" aria-label="Choose month" title="Choose a month" value="2025-06" /><!-- Large sizing -->
<Form.MonthInput list="listOfMonths" aria-label="Choose month" title="Choose a month" /><!-- Datalist -->
<datalist id="listOfMonths">
    <option value="2025-01"></option>
    <option value="2025-02"></option>
    <option value="2025-03"></option>
    <option value="2025-04"></option>
    <option value="2025-05"></option>
    <option value="2025-06"></option>
    <option value="2025-07"></option>
    <option value="2025-08"></option>
    <option value="2025-09"></option>
    <option value="2025-10"></option>
    <option value="2025-11"></option>
    <option value="2025-12"></option>
</datalist>
<Form.MonthInput bind:value={monthInputValue} aria-label="Choose month" title="Choose a month" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{monthInputValue}</code>
```

## Number Input

```html
<script lang="ts">
    let numberInputValue: number = $state(1);
</script>
<Form.NumberInput max="5" min="1" aria-label="Set number" title="Set a number" value="1" /><!-- Default -->
<Form.NumberInput disabled max="5" min="1" aria-label="Set number" title="Set a number" value="1" /><!-- Disabled -->
<Form.NumberInput max="5" min="1" readonly aria-label="Set number" title="Set a number" value="1" /><!-- Readonly -->
<Form.NumberInput isPlaintext max="5" min="1" readonly aria-label="Set number" title="Set a number" value="1" /><!-- Readonly plaintext -->
<Form.NumberInput max="5" min="1" sizing="sm" aria-label="Set number" title="Set a number" value="1" /><!-- Small sizing -->
<Form.NumberInput max="5" min="1" sizing="lg" aria-label="Set number" title="Set a number" value="1" /><!-- Large sizing -->
<Form.NumberInput list="listOfNumbers" max="5" min="1" aria-label="Set number" title="Set a number" /><!-- Datalist -->
<datalist id="listOfNumbers">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    <option value="4"></option>
    <option value="5"></option>
</datalist>
<Form.NumberInput bind:value={numberInputValue} max="5" min="1" aria-label="Set number" title="Set a number" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{numberInputValue}</code>
```

## Password Input

```html
<script lang="ts">
    let passwordInputValue: string = $state('myP@55w0rd');
    let showPassword: boolean = $state(false);
</script>
<Form.PasswordInput aria-label="Set password" title="Set a password" value="myP@55w0rd" /><!-- Default -->
<Form.PasswordInput disabled aria-label="Set password" title="Set a password" value="myP@55w0rd" /><!-- Disabled -->
<Form.PasswordInput readonly aria-label="Set password" title="Set a password" value="myP@55w0rd" /><!-- Readonly -->
<Form.PasswordInput isPlaintext readonly aria-label="Set password" title="Set a password" value="myP@55w0rd" /><!-- Readonly plaintext -->
<Form.PasswordInput sizing="sm" aria-label="Set password" title="Set a password" value="myP@55w0rd" /><!-- Small sizing -->
<Form.PasswordInput sizing="lg" aria-label="Set password" title="Set a password" value="myP@55w0rd" /><!-- Large sizing -->
<Form.PasswordInput bind:value={passwordInputValue} aria-label="Set password" title="Set a password" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{passwordInputValue}</code>
<Form.PasswordInput {showPassword} aria-label="Set password" title="Set a password" value="myP@55w0rd" /><!-- Show Password -->
<Form.Check>
    <Form.CheckInput id="showPassword" bind:checked={showPassword} />
    <Form.CheckLabel for="showPassword">Show password</Form.CheckLabel>
</Form.Check>
```

## Radio Input

⚠️ Readonly and plaintext are not supported.

```html
<script lang="ts">
    let radioValue: string = $state('');
</script>
<Form.Check><!-- Default -->
    <Form.RadioInput id="radioDefault" value="" />
    <Form.RadioLabel for="radioDefault">Default radio</Form.RadioLabel>
</Form.Check>
<Form.Check><!-- Checked -->
    <Form.RadioInput checked id="radioChecked" value="" />
    <Form.RadioLabel for="radioChecked">Checked radio</Form.RadioLabel>
</Form.Check>
<Form.Check><!-- Disabled -->
    <Form.RadioInput disabled id="radioDisabled" value="" />
    <Form.RadioLabel for="radioDisabled">Disabled radio</Form.RadioLabel>
</Form.Check>
<Form.Check><!-- Disabled checked -->
    <Form.RadioInput checked disabled id="radioDisabledChecked" value="" />
    <Form.RadioLabel for="radioDisabledChecked">Disabled checked radio</Form.RadioLabel>
</Form.Check>
<hr />
<Form.Check isInline><!-- Bounded value -->
    <Form.RadioInput bind:group={radioValue} id="radioBounded" name="radioBounded" value="1" />
    <Form.RadioLabel for="radioBounded">Radio bounded value 1</Form.RadioLabel>
</Form.Check>
<Form.Check isInline>
    <Form.RadioInput bind:group={radioValue} id="radioBounded2" name="radioBounded" value="2" />
    <Form.RadioLabel for="radioBounded2">Radio bounded value 2</Form.RadioLabel>
</Form.Check>
<span>Output:</span>&nbsp;<code>{radioValue}</code>
```

## Range Input

⚠️ Readonly, plaintext, and sizing are not supported.

```html
<script lang="ts">
    let rangeInputValue: number = $state(1);
</script>
<Form.RangeInput max="5" min="0" step="0.5" aria-label="Set number" title="Set a number" value="1" /><!-- Default -->
<Form.RangeInput disabled max="5" min="0" step="0.5" aria-label="Set number" title="Set a number" value="1" /><!-- Disabled -->
<Form.RangeInput bind:value={rangeInputValue} max="5" min="0" step="0.5" aria-label="Set number" title="Set a number" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{rangeInputValue}</code>
```

## Search Input

```html
<script lang="ts">
    let searchInputValue: string = $state('search value');
</script>
<Form.SearchInput aria-label="Set search value" title="Set a search value" value="search value" /><!-- Default -->
<Form.SearchInput disabled aria-label="Set search value" title="Set a search value" value="search value" /><!-- Disabled -->
<Form.SearchInput readonly aria-label="Set search value" title="Set a search value" value="search value" /><!-- Readonly -->
<Form.SearchInput isPlaintext readonly aria-label="Set search value" title="Set a search value" value="search value" /><!-- Readonly plaintext -->
<Form.SearchInput sizing="sm" aria-label="Set search value" title="Set a search value" value="search value" /><!-- Small sizing -->
<Form.SearchInput sizing="lg" aria-label="Set search value" title="Set a search value" value="search value" /><!-- Large sizing -->
<Form.SearchInput list="listOfSearchValues" aria-label="Set search value" title="Set a search value" value="search value" /><!-- Datalist -->
<datalist id="listOfSearchValues">
    <option value="search value 1"></option>
    <option value="search value 2"></option>
    <option value="search value 3"></option>
    <option value="search value 4"></option>
    <option value="search value 5"></option>
</datalist>
<Form.SearchInput bind:value={searchInputValue} aria-label="Set search value" title="Set a search value" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{searchInputValue}</code>
```

## Select

⚠️ Readonly and plaintext are not supported.

```html
<Form.Select aria-label="Default select example"><!-- Default -->
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>
<Form.HelperText>Default</Form.HelperText>
<Form.Select aria-label="Disabled select example" disabled><!-- Disabled -->
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>
<Form.HelperText>Disabled</Form.HelperText>
<Form.Select aria-label="Multiple select example" multiple><!-- Multiple -->
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>
<Form.HelperText>Multiple</Form.HelperText>
<Form.Select aria-label="Size of 2 select example" multiple size={2}><!-- Size -->
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>
<Form.HelperText>Size</Form.HelperText>
<Form.Select aria-label="Default select example" sizing="sm"><!-- Small sizing -->
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>
<Form.HelperText>Small sizing</Form.HelperText>
<Form.Select aria-label="Default select example" sizing="lg"><!-- Large sizing -->
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>
<Form.Select aria-label="Default select example" bind:value={selectValue}><!-- Bounded value -->
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</Form.Select>
<span>Output:</span>&nbsp;<code>{selectValue}</code>
```

## Switch Input

```html
<script lang="ts">
    let switchInputValue: boolean = $state(false);
</script>
<Form.Check isSwitch><!-- Default switch checkbox -->
    <Form.SwitchInput id="switchDefault" name="switchDefault" value="" />
    <Form.SwitchLabel for="switchDefault">Default switch checkbox</Form.SwitchLabel>
</Form.Check>
<Form.Check isSwitch><!-- Checked switch checkbox -->
    <Form.SwitchInput checked id="switchChecked" name="switchChecked" value="" />
    <Form.SwitchLabel for="switchChecked">Checked switch checkbox</Form.SwitchLabel>
</Form.Check>
<Form.Check isSwitch><!-- Disabled switch checkbox -->
    <Form.SwitchInput disabled id="switchDisabled" name="switchDisabled" value="" />
    <Form.SwitchLabel for="switchDisabled">Disabled switch checkbox</Form.SwitchLabel>
</Form.Check>
<Form.Check isSwitch><!-- Disabled checked switch checkbox -->
    <Form.SwitchInput checked disabled id="switchDisabledChecked" name="switchDisabledChecked" value="" />
    <Form.SwitchLabel for="switchDisabledChecked">Disabled checked switch checkbox</Form.SwitchLabel>
</Form.Check>
<Form.Check isSwitch><!-- Bounded switch checked value -->
    <Form.SwitchInput bind:checked={switchInputValue} id="switchBounded" name="switchBounded" />
    <Form.SwitchLabel for="switchBounded">Bounded switch checked value</Form.SwitchLabel>
</Form.Check>
<span>Output:</span>&nbsp;<code>{switchInputValue}</code>
```

## Telephone Input

```html
<script lang="ts">
    let telephoneInputValue: string = $state('555-867-5309');
</script>
<Form.TelephoneInput placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" /><!-- Default -->
<Form.TelephoneInput disabled placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" /><!-- Disabled -->
<Form.TelephoneInput readonly placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" /><!-- Readonly -->
<Form.TelephoneInput isPlaintext readonly placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" /><!-- Readonly plaintext -->
<Form.TelephoneInput sizing="sm" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" /><!-- Small sizing -->
<Form.TelephoneInput sizing="lg" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" /><!-- Large sizing -->
<Form.TelephoneInput list="listOfTelephones" placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" /><!-- Datalist -->
<datalist id="listOfTelephones">
    <option value="555-123-4567"></option>
    <option value="555-234-5678"></option>
    <option value="555-345-6789"></option>
    <option value="555-456-7890"></option>
    <option value="555-567-8901"></option>
    <option value="555-678-9012"></option>
    <option value="555-789-0123"></option>
    <option value="555-890-1234"></option>
    <option value="555-901-2345"></option>
</datalist>
<Form.TelephoneInput bind:value={telephoneInputValue} placeholder="555-867-5309" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{telephoneInputValue}</code>
```

## Telephone Input — with `mask`

Use the optional `mask` prop to format input as the user types. `#` marks a digit slot; any other character (`(`, `)`, `-`, `.`, space, `+`, …) is treated as a literal and inserted automatically. `mask` is independent of `pattern` — `pattern` continues to drive native browser validation only.

```html
<script lang="ts">
    let telephoneInputMaskedValue: string = $state('');
    let telephoneInputMaskedArrayValue: string = $state('');
</script>
<Form.TelephoneInput
    bind:value={telephoneInputMaskedValue}
    mask="(###) ###-####"
    pattern="\(\d{3}\) \d{3}-\d{4}"
    placeholder="(555) 515-1212"
    required /><!-- Single mask -->
<span>Output:</span>&nbsp;<code>{telephoneInputMaskedValue}</code>

<Form.TelephoneInput
    bind:value={telephoneInputMaskedArrayValue}
    mask={['###-###-####', '+# (###) ###-####']}
    placeholder="555-515-1212" /><!-- Array of masks -->
<span>Output:</span>&nbsp;<code>{telephoneInputMaskedArrayValue}</code>
```

## Text Area

⚠️ Plaintext is not supported.

```html
<script lang="ts">
    let textAreaValue: string = $state('textarea value');
</script>
<Form.TextArea aria-label="Set text value" title="Set a text value" value="textarea value" /><!-- Default -->
<Form.TextArea disabled aria-label="Set textarea value" title="Set a textarea value" value="textarea value" /><!-- Disabled -->
<Form.TextArea readonly aria-label="Set textarea value" title="Set a textarea value" value="textarea value" /><!-- Readonly -->
<Form.TextArea sizing="sm" aria-label="Set textarea value" title="Set a textarea value" value="textarea value" /><!-- Small sizing -->
<Form.TextArea sizing="lg" aria-label="Set textarea value" title="Set a textarea value" value="textarea value" /><!-- Large sizing -->
<Form.TextArea isResizable={false} aria-label="Set textarea value" title="Set a textarea value" value="textarea value" /><!-- Not resizable -->
<Form.TextArea bind:value={textAreaValue} aria-label="Set textarea value" title="Set a textarea value" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{textAreaValue}</code>
```

## Text Input

```html
<script lang="ts">
    let textInputValue: string = $state('text value');
</script>
<Form.TextInput aria-label="Set text value" title="Set a text value" value="text value" /><!-- Default -->
<Form.TextInput disabled aria-label="Set text value" title="Set a text value" value="text value" /><!-- Disabled -->
<Form.TextInput readonly aria-label="Set text value" title="Set a text value" value="text value" /><!-- Readonly -->
<Form.TextInput isPlaintext readonly aria-label="Set text value" title="Set a text value" value="text value" /><!-- Readonly plaintext -->
<Form.TextInput sizing="sm" aria-label="Set text value" title="Set a text value" value="text value" /><!-- Small sizing -->
<Form.TextInput sizing="lg" aria-label="Set text value" title="Set a text value" value="text value" /><!-- Large sizing -->
<Form.TextInput list="listOfTextValues" aria-label="Set text value" title="Set a text value" value="text value" /><!-- Datalist -->
<datalist id="listOfTextValues">
    <option value="text value 1"></option>
    <option value="text value 2"></option>
    <option value="text value 3"></option>
    <option value="text value 4"></option>
    <option value="text value 5"></option>
</datalist>
<Form.TextInput bind:value={textInputValue} aria-label="Set text value" title="Set a text value" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{textInputValue}</code>
```

## Time Input

```html
<script lang="ts">
    let timeInputValue: string = $state('07:32');
</script>
<Form.TimeInput max="12:00" min="00:00" aria-label="Set time" title="Set a time" value="07:32" /><!-- Default -->
<Form.TimeInput disabled max="12:00" min="00:00" aria-label="Set time" title="Set a time" value="07:32" /><!-- Disabled -->
<Form.TimeInput readonly max="12:00" min="00:00" aria-label="Set time" title="Set a time" value="07:32" /><!-- Readonly -->
<Form.TimeInput isPlaintext readonly max="12:00" min="00:00" aria-label="Set time" title="Set a time" value="07:32" /><!-- Readonly plaintext -->
<Form.TimeInput sizing="sm" max="12:00" min="00:00" aria-label="Set time" title="Set a time" value="07:32" /><!-- Small sizing -->
<Form.TimeInput sizing="lg" max="12:00" min="00:00" aria-label="Set time" title="Set a time" value="07:32" /><!-- Large sizing -->
<Form.TimeInput list="listOfTimes" max="12:00" min="00:00" aria-label="Set time" title="Set a time" /><!-- Datalist -->
<datalist id="listOfTimes">
    <option value="00:00"></option>
    <option value="01:00"></option>
    <option value="02:00"></option>
    <option value="03:00"></option>
    <option value="04:00"></option>
    <option value="05:00"></option>
    <option value="06:00"></option>
    <option value="07:00"></option>
    <option value="08:00"></option>
    <option value="09:00"></option>
    <option value="10:00"></option>
    <option value="11:00"></option>
    <option value="12:00"></option>
</datalist>
<Form.TimeInput bind:value={timeInputValue} max="12:00" min="00:00" aria-label="Set time" title="Set a time" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{timeInputValue}</code>
```

## URL Input

```html
<script lang="ts">
    let urlInputValue: string = $state('https://example.com');
</script>
<Form.UrlInput pattern="https://.*" placeholder="https://example.com" aria-label="Set URL" title="Set a URL" /><!-- Default -->
<Form.UrlInput disabled pattern="https://.*" placeholder="https://example.com" aria-label="Set URL" title="Set a URL" /><!-- Disabled -->
<Form.UrlInput readonly pattern="https://.*" placeholder="https://example.com" aria-label="Set URL" title="Set a URL" /><!-- Readonly -->
<Form.UrlInput isPlaintext readonly pattern="https://.*" placeholder="https://example.com" aria-label="Set URL" title="Set a URL" /><!-- Readonly plaintext -->
<Form.UrlInput sizing="sm" pattern="https://.*" placeholder="https://example.com" aria-label="Set URL" title="Set a URL" /><!-- Small sizing -->
<Form.UrlInput sizing="lg" pattern="https://.*" placeholder="https://example.com" aria-label="Set URL" title="Set a URL" /><!-- Large sizing -->
<Form.UrlInput list="listOfUrls" pattern="https://.*" placeholder="https://example.com" aria-label="Set URL" title="Set a URL" /><!-- Datalist -->
<datalist id="listOfUrls">
    <option value="https://developer.mozilla.org/"></option>
    <option value="http://www.google.com/"></option>
    <option value="http://www.microsoft.com/"></option>
    <option value="https://www.mozilla.org/"></option>
    <option value="http://w3.org/"></option>
</datalist>
<Form.UrlInput bind:value={urlInputValue} pattern="https://.*" placeholder="https://example.com" aria-label="Set URL" title="Set a URL" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{urlInputValue}</code>
```

## Week Input

```html
<script lang="ts">
    let weekInputValue: string = $state('2025-W07');
</script>
<Form.WeekInput aria-label="Set week" title="Set a week" value="2025-W07" /><!-- Default -->
<Form.WeekInput disabled aria-label="Set week" title="Set a week" value="2025-W07" /><!-- Disabled -->
<Form.WeekInput readonly aria-label="Set week" title="Set a week" value="2025-W07" /><!-- Readonly -->
<Form.WeekInput isPlaintext readonly aria-label="Set week" title="Set a week" value="2025-W07" /><!-- Readonly plaintext -->
<Form.WeekInput sizing="sm" aria-label="Set week" title="Set a week" value="2025-W07" /><!-- Small sizing -->
<Form.WeekInput sizing="lg" aria-label="Set week" title="Set a week" value="2025-W07" /><!-- Large sizing -->
<Form.WeekInput list="listOfTextValues" aria-label="Set week" title="Set a week" /><!-- Datalist -->
<datalist id="listOfWeeks">
    <option value="2025-W01"></option>
    <option value="2025-W02"></option>
    <option value="2025-W03"></option>
    <option value="2025-W04"></option>
    <option value="2025-W05"></option>
    <option value="2025-W06"></option>
    <option value="2025-W07"></option>
    <option value="2025-W08"></option>
    <option value="2025-W09"></option>
    <option value="2025-W10"></option>
</datalist>
<Form.WeekInput bind:value={weekInputValue} aria-label="Set week" title="Set a week" /><!-- Bounded value -->
<span>Output:</span>&nbsp;<code>{weekInputValue}</code>
```