Input
Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。
<Input placeholder="Placeholder" />
使い方
import { Input, InputGroup } from "@yamada-ui/react"
import { Input, InputGroup } from "@/components/ui"
import { Input, InputGroup } from "@workspaces/ui"
<Input />
<InputGroup.Root>
<InputGroup.Addon />
<Input />
<InputGroup.Element />
</InputGroup.Root>
バリアントを変更する
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Input
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
サイズを変更する
<VStack>
<For each={["sm", "md", "lg"]}>
{(size) => <Input key={size} size={size} placeholder={`Size (${size})`} />}
</For>
</VStack>
カラースキームを変更する
<VStack>
<For each={["success", "warning"]}>
{(colorScheme) => (
<Input
key={colorScheme}
colorScheme={colorScheme}
placeholder={toTitleCase(colorScheme)}
/>
)}
</For>
</VStack>
無効にする
無効にする場合は、disabledをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Input
key={variant}
disabled
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Input
key={variant}
readOnly
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
無効な入力にする
無効な入力にする場合は、invalidをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<Input
key={variant}
invalid
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
アドオンを追加する
アドオンを追加する場合は、InputをInputGroupでラッピングし、InputGroup.Addonを使用します。
https://
.com
https://
.com
https://
.com
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<InputGroup.Root key={variant} variant={variant}>
<InputGroup.Addon>https://</InputGroup.Addon>
<Input placeholder="Your site address" />
<InputGroup.Addon>.com</InputGroup.Addon>
</InputGroup.Root>
)}
</For>
</VStack>
要素を追加する
要素を追加する場合は、InputをInputGroupでラッピングし、InputGroup.Elementを使用します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<InputGroup.Root key={variant} variant={variant}>
<InputGroup.Element>
<PhoneIcon />
</InputGroup.Element>
<Input type="tel" placeholder="Your phone number" />
</InputGroup.Root>
)}
</For>
</VStack>
タイプを変更する
タイプを変更する場合は、typeにタイプを設定します。
<Input placeholder="Select Date and Time" type="datetime-local" />
ボーダーの色を変更する
ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。
<VStack>
<Input focusBorderColor="green.500" placeholder="Custom focus border color" />
<Input
errorBorderColor="orange.500"
invalid
placeholder="Custom invalid border color"
/>
</VStack>
プレースホルダーのカラーを変更する
プレースホルダーのカラーを変更する場合は、_placeholderに値を設定します。
<Input placeholder="Custom placeholder" _placeholder={{ color: "blue.500" }} />
フローティングラベルを使う
<Field.Root>
<Input type="email" data-peer placeholder="" />
<Field.Label
css={{
bg: "bg",
fontSize: "sm",
fontWeight: "normal",
insetStart: "2",
pointerEvents: "none",
position: "absolute",
px: "1",
top: "-12px",
transitionDuration: "moderate",
transitionProperty: "top, color, font-size",
transitionTimingFunction: "ease-in-out",
zIndex: "yamcha",
_peerPlaceholderShown: {
color: "fg.subtle",
fontSize: "md",
insetStart: "2",
top: "5px",
},
// eslint-disable-next-line perfectionist/sort-objects
_peerFocusVisible: {
color: "fg",
fontSize: "sm",
insetStart: "2",
top: "-12px",
},
}}
>
Email
</Field.Label>
</Field.Root>
制御する
const [value, setValue] = useState<string>("オッス！オラ悟空！")
return <Input value={value} onChange={(ev) => setValue(ev.target.value)} />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。