Input

Displays a form input field.

Example

Input

import { UiLabel, UiCheckbox, UiIcons } from '@altdot/extension';
import { useState } from 'react';

export default function Command() {
  const [value, setValue] = useState('');

  return (
    <>
      <UiInput value={value} onValueChange={setValue} placeholder="Write something..." />
      {value}
    </>
  );
}

Input with icon

view-command.tsx

import { UiLabel, UiCheckbox } from '@altdot/extension';

export default function Command() {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <UiLabel htmlFor="email-input">Email</UiLabel>
      <UiInput id="email-input" prefixIcon={UiIcons.Search} placeholder="john_doe@example.com" />
    </div>
  );
}

Props

Name	Type	Description
inputSize	?('default' | 'sm')	The input’s size variant. Default to default
prefixIcon	?JSX.Element	Add prefix icon to the input
suffixIcon	?JSX.Element	Add suffix icon to the input
onValueChange	?((value: string) => void)	Fired when the input value is changed