How to create a floating label input フローティングラベル入力の作り方
Material Design-style input where the label floats up on focus. フォーカス時にラベルが上部に移動するマテリアルデザイン風の入力フィールド。
ライブデモ Live Demo
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Material Design-style input where the label floats up on focus.
フォーカス時にラベルが上部に移動するマテリアルデザイン風の入力フィールド。
どこで使うかWhere to use
contact form, signup flow, checkout form, search interface
ログインフォーム、登録フォーム、連絡先フォーム、設定フォーム
特徴Key features
Label floats above the input on focus or when the field has a value. Pure CSS using :placeholder-shown and :focus pseudo-classes. No JavaScript needed. Works with all input types. ARIA-compatible.
フォーカス時または入力値があるときにラベルが入力フィールド上にフロート。:placeholder-shownと:focus疑似クラスを使用した純粋なCSS。JavaScript不要。全inputタイプに対応。ARIA互換。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
border-color (focus) | — | Border color on focus |
transition timing | — | Label animation speed |
font-size (label) | — | Floated label font size |
実装コード Implementation Code
// react/F-001.jsx
import './F-001.css';
export default function FloatingLabelInput({ label, type = 'text', id }) {
return (
<div className="float-group">
<input type={type} id={id} placeholder=" " />
<label htmlFor={id}>{label}</label>
</div>
);
}.float-group {
position: relative;
margin-bottom: 24px;
}
.float-group input {
width: 100%;
padding: 18px 16px 6px;
font-size: 16px;
border: 2px solid #e0e4f0;
border-radius: 12px;
outline: none;
transition: border-color var(--transition-speed, 0.3s) ease;
}
.float-group input:focus {
border-color: var(--focus-color, #5c6ac4);
}
.float-group label {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--label-color, #999);
pointer-events: none;
transition: all var(--transition-speed, 0.25s) cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
padding: 0 4px;
}
.float-group input:focus ~ label,
.float-group input:not(:placeholder-shown) ~ label {
top: 0;
font-size: 12px;
color: var(--focus-color, #5c6ac4);
font-weight: 600;
}import './F-001.css';
export default function FloatingLabelInput({ label, type = 'text', id }) {
return (
<div className="float-group">
<input type={type} id={id} placeholder=" " />
<label htmlFor={id}>{label}</label>
</div>
);
}/* F-001: Floating Label Input - styles handled by global.css */
.float-group {
position: relative;
margin-bottom: 24px;
}
.float-group input {
width: 100%;
padding: 18px 16px 6px;
font-size: 16px;
border: 2px solid var(--border, #e0e4f0);
border-radius: 12px;
outline: none;
transition: border-color 0.3s ease;
font-family: inherit;
}
.float-group input:focus {
border-color: #5c6ac4;
}
.float-group label {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #999;
pointer-events: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
padding: 0 4px;
}
.float-group input:focus ~ label,
.float-group input:not(:placeholder-shown) ~ label {
top: 0;
font-size: 12px;
color: #5c6ac4;
font-weight: 600;
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
The label is positioned absolutely inside the input wrapper, initially at the input's baseline. When the input is focused or has a value (detected via :not(:placeholder-shown)), CSS transitions move the label upward and scale it to ~75% size. The placeholder is set to a single space to enable the :placeholder-shown hack without visible placeholder text.
ラベルは入力ラッパー内に絶対配置され、最初は入力フィールドのベースラインに位置。入力がフォーカスされるか値がある（:not(:placeholder-shown)で検出）とCSSトランジションがラベルを上に移動して約75%のサイズにスケール。:placeholder-shownハックを有効にするためプレースホルダーに単一スペースを設定し可視のプレースホルダーテキストを非表示にします。
カスタマイズ方法Customization
Add a colored border and label on focus using :focus-within on the wrapper. Include an error state class that colors the label and border red and shows an error message below. Add a success state that shows a checkmark icon inside the input.
ラッパーの:focus-withinを使用してフォーカス時に色付きボーダーとラベルを追加。ラベルとボーダーを赤にして下にエラーメッセージを表示するエラー状態クラスを追加。入力内にチェックマークアイコンを表示する成功状態を追加。
注意点Caveats
The CSS :placeholder-shown trick requires a non-empty placeholder (single space). This can confuse screen readers — always pair with a proper <label for="..."> association. Do not rely solely on the floating position to indicate focus; also add a visible focus ring (outline).
CSS :placeholder-shownトリックは空でないプレースホルダー（単一スペース）が必要です。これはスクリーンリーダーを混乱させる可能性があります — 常に適切な<label for="...">の関連付けと組み合わせてください。フォーカスを示すためにフローティング位置だけに頼らないでください。可視のフォーカスリング（outline）も追加してください。
よくある質問 Frequently Asked Questions
How to customize the floating label input? Floating Label Inputをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the floating label input in React? ReactでFloating Label Inputを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of floating label input? Floating Label Inputのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.