Input

import { Input, InputWrapper, Label } from "@medway-ui/core";
 
export default function InputDemo() {
  return (
    <InputWrapper>
      <Label htmlFor="name">Name</Label>
      <Input id="name" placeholder="Name" />
    </InputWrapper>
  );
}

import { Input, InputLabel, InputWrapper } from "@medway-ui/core";
 
export default function InputFloatingLabelDemo() {
  return (
    <InputWrapper>
      <InputLabel htmlFor="email">Email</InputLabel>
      <Input id="email" type="email" placeholder="Email" />
    </InputWrapper>
  );
}

import { Input, InputField, InputLabel, InputText, InputWrapper } from "@medway-ui/core";
 
export default function InputStatesDemo() {
  return (
    <div className="flex flex-col gap-6">
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="company">Company</InputLabel>
          <Input id="company" placeholder="Company" />
        </InputField>
        <InputText>Optional</InputText>
      </InputWrapper>
 
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="disabled">Disabled</InputLabel>
          <Input id="disabled" placeholder="Disabled" disabled />
        </InputField>
        <InputText>Disabled state</InputText>
      </InputWrapper>
 
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="username">Username</InputLabel>
          <Input id="username" placeholder="Username" invalid />
        </InputField>
        <InputText invalid>Username is required</InputText>
      </InputWrapper>
    </div>
  );
}

import { Mail, SearchMagnifyingGlass } from "@medway-ui/icons";
import {
  Input,
  InputField,
  InputLabel,
  InputText,
  InputWrapper,
} from "@medway-ui/core";
 
export default function InputIconsDemo() {
  return (
    <>
      {/* Start icon only */}
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="search">Search</InputLabel>
          <Input
            id="search"
            placeholder="Search"
            iconLeft={<SearchMagnifyingGlass />}
          />
        </InputField>
      </InputWrapper>
 
      {/* Start + end icons */}
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="search-both">Search</InputLabel>
          <Input
            id="search-both"
            placeholder="Search"
            iconLeft={<SearchMagnifyingGlass />}
            iconRight={<Mail />}
          />
        </InputField>
      </InputWrapper>
 
      {/* Override default type icon: email has default Mail, pass iconLeft to replace */}
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="email-override">Email</InputLabel>
          <Input
            id="email-override"
            type="email"
            placeholder="Email"
          />
        </InputField>
      </InputWrapper>
    </>
  );
}

import { SearchMagnifyingGlass } from "@medway-ui/icons";
import {
  Input,
  InputField,
  InputLabel,
  InputWrapper,
  Label,
} from "@medway-ui/core";
 
export default function InputSizeMdDemo() {
  return (
    <div className="flex flex-col gap-6">
      <InputWrapper>
        <Label htmlFor="name-md">Name</Label>
        <Input id="name-md" placeholder="Name" size="md" />
      </InputWrapper>
 
      <InputWrapper>
        <InputLabel htmlFor="email-md">Email</InputLabel>
        <Input id="email-md" type="email" placeholder="Email" size="md" />
      </InputWrapper>
 
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="search-md">Search</InputLabel>
          <Input
            id="search-md"
            placeholder="Search"
            size="md"
            iconLeft={<SearchMagnifyingGlass />}
          />
        </InputField>
      </InputWrapper>
    </div>
  );
}

import {
  Input,
  InputField,
  InputLabel,
  InputText,
  InputWrapper,
} from "@medway-ui/core";
 
export default function InputSizeMdStatesDemo() {
  return (
    <div className="flex flex-col gap-6">
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="company-md">Company</InputLabel>
          <Input id="company-md" placeholder="Company" size="md" />
        </InputField>
        <InputText>Optional</InputText>
      </InputWrapper>
 
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="disabled-md">Disabled</InputLabel>
          <Input id="disabled-md" placeholder="Disabled" size="md" disabled />
        </InputField>
        <InputText>Disabled state</InputText>
      </InputWrapper>
 
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="username-md">Username</InputLabel>
          <Input id="username-md" placeholder="Username" size="md" invalid />
        </InputField>
        <InputText invalid>Username is required</InputText>
      </InputWrapper>
    </div>
  );
}

import { Input, InputWrapper, Label } from "@medway-ui/core";
 
export default function InputNumericDefaultDemo() {
  return (
    <InputWrapper>
      <Label htmlFor="quantity-label">Quantity</Label>
      <Input id="quantity-label" type="numeric" placeholder="Quantity" min={0} />
    </InputWrapper>
  );
}

import { Input, InputLabel, InputWrapper } from "@medway-ui/core";
 
export default function InputNumericDemo() {
  return (
    <InputWrapper>
      <InputLabel htmlFor="quantity">Quantity</InputLabel>
      <Input id="quantity" type="numeric" placeholder="Quantity" min={0} />
    </InputWrapper>
  );
}

import { Input, InputField, InputLabel, InputText, InputWrapper } from "@medway-ui/core";
 
export default function InputNumericStatesDemo() {
  return (
    <div className="flex flex-col gap-6">
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="age">Age</InputLabel>
          <Input id="age" type="numeric" placeholder="Age" min={0} />
        </InputField>
        <InputText>Must be 0 or greater</InputText>
      </InputWrapper>
 
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="count-disabled">Count</InputLabel>
          <Input id="count-disabled" type="numeric" placeholder="Count" min={0} disabled />
        </InputField>
        <InputText>Disabled state</InputText>
      </InputWrapper>
 
      <InputWrapper>
        <InputField>
          <InputLabel htmlFor="score">Score</InputLabel>
          <Input id="score" type="numeric" placeholder="Score" min={0} invalid />
        </InputField>
        <InputText invalid>Score must be 0 or greater</InputText>
      </InputWrapper>
    </div>
  );
}

import { ShoppingCart } from "@medway-ui/icons";
import {
  Input,
  InputField,
  InputLabel,
  InputText,
  InputWrapper,
} from "@medway-ui/core";
 
export default function InputNumericIconDemo() {
  return (
    <InputWrapper>
      <InputField>
        <InputLabel htmlFor="price">Price</InputLabel>
        <Input
          id="price"
          type="numeric"
          placeholder="0.00"
          min={0}
          iconLeft={<ShoppingCart />}
        />
      </InputField>
      <InputText>USD</InputText>
    </InputWrapper>
  );
}

import { Input, InputField, InputLabel, InputWrapper } from "@medway-ui/core";
 
export default function InputNumericSizeMdDemo() {
  return (
    <InputWrapper>
      <InputField>
        <InputLabel htmlFor="quantity-md">Quantity</InputLabel>
        <Input
          id="quantity-md"
          type="numeric"
          placeholder="Quantity"
          min={0}
          size="md"
        />
      </InputField>
    </InputWrapper>
  );
}

import { Input, InputField, InputLabel, InputWrapper } from "@medway-ui/core";
 
export default function InputPasswordDemo() {
  return (
    <InputWrapper>
      <InputField>
        <InputLabel htmlFor="password">Password</InputLabel>
        <Input id="password" type="password" placeholder="Password" />
      </InputField>
    </InputWrapper>
  );
}

import { Input, InputField, InputLabel, InputText, InputWrapper } from "@medway-ui/core";
 
export default function InputPasswordHelperDemo() {
  return (
    <InputWrapper>
      <InputField>
        <InputLabel htmlFor="password">Password</InputLabel>
        <Input id="password" type="password" placeholder="Password" />
      </InputField>
      <InputText>Must be at least 8 characters</InputText>
    </InputWrapper>
  );
}

import { Input, InputField, InputLabel, InputText, InputWrapper } from "@medway-ui/core";
 
export default function InputPasswordInvalidDemo() {
  return (
    <InputWrapper>
      <InputField>
        <InputLabel htmlFor="password">Password</InputLabel>
        <Input id="password" type="password" placeholder="Password" invalid />
      </InputField>
      <InputText invalid>Password must be at least 8 characters</InputText>
    </InputWrapper>
  );
}