Model Selector

Rich select for AI model selection with metadata display.

python 11 params

Model

Arguments

model_selector(name='model', label='Model', options=[{'value': 'claude-opus-5', 'label': 'Opus 5', 'description': 'Most capable', 'context_window': '200k', 'tier': 'premium'}, {'value': 'claude-sonnet-5', 'label': 'Sonnet 5', 'description': 'Balanced', 'context_window': '200k', 'tier': 'standard'}, {'value': 'claude-haiku-4-5', 'label': 'Haiku 4.5', 'description': 'Fast and cost-effective', 'context_window': '200k', 'tier': 'free'}], value='claude-sonnet-5', event='select_model')

Usage

views.py

from djust import LiveView
from djust.decorators import event_handler
from djust.components import ModelSelector


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.component = ModelSelector(name='model', label='Model', options=[{'value': 'claude-opus-5', 'label': 'Opus 5', 'description': 'Most capable', 'context_window': '200k', 'tier': 'premium'}, {'value': 'claude-sonnet-5', 'label': 'Sonnet 5', 'description': 'Balanced', 'context_window': '200k', 'tier': 'standard'}, {'value': 'claude-haiku-4-5', 'label': 'Haiku 4.5', 'description': 'Fast and cost-effective', 'context_window': '200k', 'tier': 'free'}], value='claude-sonnet-5', event='select_model')

    @event_handler()
    def toggle_model_selector(self, **kwargs):
        self.component.is_open = not self.component.is_open

    @event_handler()
    def select_model(self, value, **kwargs):
        self.component.value = value
        self.component.is_open = False

my_template.html

{{ component }}

Events this component sends to the view: toggle_model_selector, select_model.

Parameters

Name	Type	Default	Description
name	str	'model'	Form field name
options	list \| None	None	List of model option dicts (value, label, description, context_window, tier)
value	str	''	Currently selected model value
event	str — renames the event	'select_model'	djust event fired on selection
toggle_event	str — renames the event	'toggle_model_selector'	djust event fired when the trigger is clicked. The host owns `is_open` — this component renders it, it does not track it.
is_open	bool	False	Whether the option list is showing
placeholder	str	'Select a model...'	Placeholder text
disabled	bool	False	Whether selector is disabled
label	str	''	Optional label text
custom_class	str	''	Additional CSS classes
**kwargs	— passed to `Component.__init__`: `id=` sets `component.id`, and any other keyword is kept as state	—	—

Source & styles

File	Path	Notes
module	djust.components.components.model_selector	Subclass it, or pass custom_class, to change how it renders.
css	djust_components/components-classes.css	Defines 16 of this component's classes at line 733, 735, 736, 737, 739, 742, 743, 744, 745, 746, 747, 748, 749, 750, 751, 752. Override those rules, or the custom properties they read, in a stylesheet loaded after it.

Model Selector

Preview

Usage

Parameters