بنية إدخال HTML أصلي
مدخلات HTML أصلية بتخطيط مشترك، أيقونات اختيارية، وأنواع مجمّعة.
All types
Text
Date & time
Multiple
Other
<.anatomy_all_fields id_prefix="native-input-all" input_class="native-input" />
نص
<div class="layout__row flex flex-col gap-4">
<.native_input type="text" name="user[name]" class="native-input">
<:label>Text</:label>
<:icon><.heroicon name="hero-pencil-square" class="icon" /></:icon>
</.native_input>
<.native_input type="text" name="user[name]" class="native-input">
<:label>Text</:label>
</.native_input>
<.native_input type="textarea" name="user[bio]" class="native-input">
<:label>Bio</:label>
</.native_input>
<.native_input type="email" name="user[email]" class="native-input">
<:label>Email</:label>
<:icon><.heroicon name="hero-envelope" class="icon" /></:icon>
</.native_input>
<.native_input type="email" name="user[email]" class="native-input">
<:label>Email</:label>
</.native_input>
<.native_input type="url" name="user[website]" class="native-input">
<:label>Website</:label>
<:icon><.heroicon name="hero-link" class="icon" /></:icon>
</.native_input>
<.native_input type="url" name="user[website]" class="native-input">
<:label>Website</:label>
</.native_input>
<.native_input type="tel" name="user[phone]" class="native-input">
<:label>Phone</:label>
<:icon><.heroicon name="hero-phone" class="icon" /></:icon>
</.native_input>
<.native_input type="tel" name="user[phone]" class="native-input">
<:label>Phone</:label>
</.native_input>
<.native_input type="search" name="q" class="native-input" placeholder="Search">
<:label>Search</:label>
<:icon><.heroicon name="hero-magnifying-glass" class="icon" /></:icon>
</.native_input>
<.native_input type="search" name="q" class="native-input" placeholder="Search">
<:label>Search</:label>
</.native_input>
<.native_input type="password" name="user[password]" class="native-input">
<:label>Password</:label>
<:icon><.heroicon name="hero-lock-closed" class="icon" /></:icon>
</.native_input>
<.native_input type="password" name="user[password]" class="native-input">
<:label>Password</:label>
</.native_input>
<.native_input
type="number"
name="user[count]"
value="42"
min="0"
max="100"
step="1"
class="native-input"
>
<:label>Number</:label>
</.native_input>
</div>
التاريخ والوقت
<div class="layout__row flex flex-col gap-4">
<.native_input type="date" name="user[date]" class="native-input">
<:label>Date</:label>
</.native_input>
<.native_input type="datetime-local" name="user[datetime]" class="native-input">
<:label>Date and time</:label>
</.native_input>
<.native_input type="time" name="user[time]" class="native-input">
<:label>Time</:label>
</.native_input>
<.native_input type="month" name="user[month]" class="native-input">
<:label>Month</:label>
</.native_input>
<.native_input type="week" name="user[week]" class="native-input">
<:label>Week</:label>
</.native_input>
</div>
متعدد
<div class="layout__row flex flex-col gap-4">
<.native_input
type="select"
multiple
name="user[tags][]"
options={[
{"Elixir", "elixir"},
{"Phoenix", "phoenix"},
{"LiveView", "liveview"},
{"Ecto", "ecto"},
{"OTP", "otp"}
]}
prompt="Choose tags..."
class="native-input"
>
<:label>Tags</:label>
</.native_input>
</div>
أخرى
<.native_input type="checkbox" name="user[agree]" class="native-input">
<:label>I agree</:label>
</.native_input>
<.native_input type="select" name="user[role]" options={["Admin": "admin", "User": "user"]} prompt="Choose role" class="native-input">
<:label>Role</:label>
</.native_input>
<.native_input type="radio" name="user[size]" options={["Small": "s", "Medium": "m", "Large": "l"]} value="m" class="native-input">
<:label>Size</:label>
</.native_input>