Hex doc
Phoenix
All types
Text
Date & time
Multiple
Other
<.anatomy_all_fields id_prefix="native-input-all" input_class="native-input" />
Semantic
Use class="ui-{role}" to set the semantic palette of a native input.
Available options: accent, alert, brand, info, success
Default
Text
Date & time
Multiple
Other
Accent
Text
Date & time
Multiple
Other
Brand
Text
Date & time
Multiple
Other
Alert
Text
Date & time
Multiple
Other
Info
Text
Date & time
Multiple
Other
Success
Text
Date & time
Multiple
Other
<div class="max-h-[70vh] overflow-y-auto scrollbar scrollbar--sm" tabindex="0">
<.anatomy_all_fields
id_prefix="native-input-style-color-example"
input_class="native-input ui-accent max-w-md w-full"
/>
</div>
Size
Use class="ui-size-{size}" to set the size of a native input.
Available options: xs, sm, md (default), lg, xl
SM
Text
Date & time
Multiple
Other
MD
Text
Date & time
Multiple
Other
LG
Text
Date & time
Multiple
Other
XL
Text
Date & time
Multiple
Other
<div class="max-h-[70vh] overflow-y-auto scrollbar scrollbar--sm" tabindex="0">
<.anatomy_all_fields
id_prefix="native-input-style-size-example"
input_class="native-input ui-size-lg max-w-md w-full"
/>
</div>
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a native input.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
None
Text
Date & time
Multiple
Other
SM
Text
Date & time
Multiple
Other
MD
Text
Date & time
Multiple
Other
LG
Text
Date & time
Multiple
Other
XL
Text
Date & time
Multiple
Other
Full
Text
Date & time
Multiple
Other
<div class="max-h-[70vh] overflow-y-auto scrollbar scrollbar--sm" tabindex="0">
<.anatomy_all_fields
id_prefix="native-input-style-rounded-example"
input_class="native-input ui-rounded-lg max-w-md w-full"
/>
</div>
Max width
Without max-w-*, width comes from component CSS. Default for native-input: xs (width: 100%).
Use class="max-w-{step}" to set the maximum width of a native input root.
Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs (default), sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
default (xs)
Text
Date & time
Multiple
Other
none
Text
Date & time
Multiple
Other
full
Text
Date & time
Multiple
Other
9xs
Text
Date & time
Multiple
Other
8xs
Text
Date & time
Multiple
Other
7xs
Text
Date & time
Multiple
Other
6xs
Text
Date & time
Multiple
Other
5xs
Text
Date & time
Multiple
Other
4xs
Text
Date & time
Multiple
Other
3xs
Text
Date & time
Multiple
Other
2xs
Text
Date & time
Multiple
Other
xs
Text
Date & time
Multiple
Other
sm
Text
Date & time
Multiple
Other
md
Text
Date & time
Multiple
Other
lg
Text
Date & time
Multiple
Other
xl
Text
Date & time
Multiple
Other
2xl
Text
Date & time
Multiple
Other
3xl
Text
Date & time
Multiple
Other
4xl
Text
Date & time
Multiple
Other
5xl
Text
Date & time
Multiple
Other
6xl
Text
Date & time
Multiple
Other
7xl
Text
Date & time
Multiple
Other
8xl
Text
Date & time
Multiple
Other
9xl
Text
Date & time
Multiple
Other
<div class="w-full max-h-[70vh] overflow-y-auto scrollbar scrollbar--sm" tabindex="0">
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">default (xs)</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-default"
input_class="native-input w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">none</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-none"
input_class="native-input max-w-none w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">full</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-full"
input_class="native-input max-w-full w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">9xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-9xs"
input_class="native-input max-w-9xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">8xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-8xs"
input_class="native-input max-w-8xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">7xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-7xs"
input_class="native-input max-w-7xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">6xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-6xs"
input_class="native-input max-w-6xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">5xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-5xs"
input_class="native-input max-w-5xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">4xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-4xs"
input_class="native-input max-w-4xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">3xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-3xs"
input_class="native-input max-w-3xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">2xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-2xs"
input_class="native-input max-w-2xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">xs</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-xs"
input_class="native-input max-w-xs w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">sm</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-sm"
input_class="native-input max-w-sm w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">md</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-md"
input_class="native-input max-w-md w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">lg</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-lg"
input_class="native-input max-w-lg w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-xl"
input_class="native-input max-w-xl w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">2xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-2xl"
input_class="native-input max-w-2xl w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">3xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-3xl"
input_class="native-input max-w-3xl w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">4xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-4xl"
input_class="native-input max-w-4xl w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">5xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-5xl"
input_class="native-input max-w-5xl w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">6xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-6xl"
input_class="native-input max-w-6xl w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">7xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-7xl"
input_class="native-input max-w-7xl w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">8xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-8xl"
input_class="native-input max-w-8xl w-full"
/>
</div>
<div class="flex flex-col gap-space pb-size-sm last:pb-0">
<p class="typo ui-size-sm font-medium">9xl</p>
<.anatomy_all_fields
id_prefix="native-input-style-max-width-9xl"
input_class="native-input max-w-9xl w-full"
/>
</div>
</div>