Input

Sizes

<DemoSpaceX>
  <VelvetInput @size="sm" />
  <VelvetInput @size="md" />
  <VelvetInput @size="lg" />
</DemoSpaceX>

Pill

<VelvetInput @isPill={{true}} />

Disabled

<VelvetInput @isDisabled={{true}} />

Invalid

<VelvetInput @isInvalid={{true}} />

Placeholder

<VelvetInput @placeholder="Type something here..." />

Types

<DemoSpaceX>
  <VelvetInput @type="number" />
  <VelvetInput @type="time" />
  <VelvetInput @type="date" />
  <VelvetInput @type="range" />
</DemoSpaceX>

Examples

Handle Input Events

Edit this demo

Use the @onInput argument to handle input events.

Value: Value

<DemoSpaceY>
  <div>Value: {{this.value}}</div>
  <VelvetInput @onInput={{this.onInput}} @value={{this.value}} />
</DemoSpaceY>

Handle Change Events

Edit this demo

Use the @onChange argument to handle change events.

Value: Value

<DemoSpaceY>
  <div>Value: {{this.value}}</div>
  <VelvetInput @onChange={{this.onChange}} @value={{this.value}} />
</DemoSpaceY>

Signature

Element

HTMLInputElement

Blocks

This component does not accept any blocks.

Arguments

Name	Description	Type	Default Value
`@isDisabled`	Indicate if the input is disabled.	`boolean`	`false`
`@isInvalid`	Indicate if the input is invalid.	`boolean`	`false`
`@isPill`	Indicate if the input is pill shaped.	`boolean`	`false`
`@onChange`	Handle the input's `change` event.	`(value: string, event: Event) => void`	`undefined`
`@onInput`	Handle the input's `input` event.	`(value: string, event: Event) => void`	`undefined`
`@placeholder`	The placeholder of the input.	`string`	`""`
`@size`	The size of the input.	`"sm" \| "md" \| "lg"`	`"md"`
`@type`	The type of the input.	`string`	`""`
`@value`	The value of the input.	`string`	`""`
`@variant`	The appearance of the input.	`string \| "primary"`	`"primary"`

Arguments marked with * are required.